[CSS/DIV] Analizar el uso de los cuatro principales selectores de valores de atributos CSS

Este artículo te lo describiráSelector de valores de propiedades CSSEl formato del selector de atributos es elemento seguido de paréntesis, con atributos entre paréntesis, o expresiones de atributos (no sé si la descripción es correcta, palabras que yo mismo creé), como h1[título], h1[título="logo"], etc., creo que aprenderás mucho en este artículo.

Tutorial de CSS: Selector de valores de atributos CSS

CSS AttributeSelectors, quizá no deberías ser un desconocido con los selectores de atributos, en esencia, los selectores id y class son en realidad selectores de valor de atributo, solo tienes que seleccionar el id o el valor de clase.

El formato del selector de atributos es elemento seguido de paréntesis, con atributos entre paréntesis, o expresiones de atributos (no sé si la descripción es correcta, palabras auto-creadas), como h1[título], h1[título="Logo"], etc., puedes ver 4 formas específicas de mi discusión más abajo.

1. Selector de valores de atributos CSS sencillo

Independientemente del nombre, esta es la característica del selector de atributos simple.

h1[clase]{color:plateado; actuará sobre cualquier elemento h1 con clase, independientemente del valor de la clase. Por lo tanto<h1class="hoopla">Hola</h1>, <h1class="severa">Serenity</h1>, <h1class="fancy"> h1 de Fooling</h1> se verá afectada por esta regla.

Por supuesto, esta "propiedad" no es solo una clase o id, sino que puede ser todas las propiedades legítimas del elemento, como el alt de img, como img[alt]{cssdeclarationshere; Se aplicará a cualquier elemento de IMG con el atributo alternativo. Luego a[href][título]{font-weight:bold; ¿Y qué tal }? Como sabes, esto funciona con elementos con atributos href y title, como <atitle="W3CHome">W3C</a>.

2. Selector preciso de valores de atributos CSS

id y class son esencialmente selectores exactos de valores de atributo, sí, h1#logo es igual a h1[id="logo"]. Como mencioné antes, no nos limitamos a identificación o clase, ¡podemos usar cualquier propiedad! Por ejemplo, a[][title="W3CHome"]{font-size:200%; } se aplicará a <atitle="W3CHome">W3C</a>.

3. Algunos selectores de valores de atributos CSS

Como su nombre indica, mientras el valor del atributo coincida parcialmente (en este caso, la parte que realmente coincide con toda la palabra) actuará sobre el elemento. Veamos un ejemplo:

Cualquiera de estos puede hacer que la fuente de la p quede en negrita.

Este selector es muy útil, por ejemplo, si quieres estilizar una ilustración con la cadena "Figure" en su título, por ejemplo, title="Figure5:xxx description", puedes usar img[title~="Figure"].

Cabe señalar que, como he enfatizado en la primera frase, tienes que coincidir con la palabra entera, y img[title~="Figura"] no coincidirá con la descripción title="Figura5:xxx".

Además, hice una pequeña prueba, cambias "Figura" por "Ilustración" en el ejemplo, y cambias img[title~="Figura"] por img[título~="Ilustración"], y sigue coincidiendo en Firefox, independientemente de si la codificación es GB2312 o UTF-8. Parece que el soporte CSS para chino no está mal.

4. Selector especial de valores de atributos CSS

Es un poco raro, este selector. Funciona así, bueno, es más fácil dar un ejemplo que describirlo.

*[lang|="en"]{color:white; Esta regla seleccionará el valor del atributo lang o del elemento que comienza por en-. Es decir, puede coincidir con <h1lang="en">¡Hola!</h1>, <plang="en-us">¡Saludos!</p>y <divlang="en-au">¡Buenos días!</div>y no coincide con <plang="fr">Bonjour!</p>y <h3lang="cy-en">Jrooana!</h3>.