Funciones útiles de CSS

attr : La función se utiliza para obtener el valor de atributo del elemento seleccionado,  acepta tres parámetros, nombre de atributo, tipo y valor por defecto.

语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

Ejemplo:

<p data-text="you see"
  data-tooltip="cute!" class="attr">hover试一试：</p>

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

 calc: calcula el valor de css

Ejemplo:

<style>
p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}
</style>
<p class="calc">Centered with calc</p>

var () A través de esta función, podemos usar el valor de una propiedad personalizada como el valor de otra propiedad CSS.

En pocas palabras, podemos definir un color, por ejemplo, ponerlo en una propiedad personalizada (variable CSS) y luego varreutilizar el valor de la propiedad llamando a una función.

: root es una pseudoclase que representa el elemento raíz del documento. Es compatible con navegadores que no son IE e IE8 y superiores. La declaración en: root es equivalente a un atributo global . Siempre que la página actual haga referencia al archivo donde se encuentra el segmento: root, se puede usar var () Citar

<style>
:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}
</style>
<p class="var">Colored with var</p>