En el desarrollo normal, es realmente conveniente usar selectores de CSS. No es necesario definir varios nombres de clase para mejorar la flexibilidad. Este artículo se usa para grabar. Corríjame si hay alguna imprecisión.
Manual de referencia de selectores CSS
Echemos un vistazo al manual de referencia para los selectores de CSS primero. Es mejor envolver el valor entre "comillas" cuando lo use, de lo contrario, solo puede coincidir con letras (la sintaxis de la tabla de Markdown tiene "|", por lo que desea ingresar "|"
usando |escapar lograr)
| Selector | describir |
|---|---|
| [atributo] | Se utiliza para seleccionar elementos con atributos específicos |
| [atributo=valor] | Se utiliza para seleccionar elementos con atributos y valores especificados. |
| [atributo~=valor] | Se utiliza para seleccionar elementos que contienen el vocabulario especificado en sus valores de atributo. |
| [atributo|=valor] | Se utiliza para seleccionar elementos con un valor de atributo que comienza con el valor especificado, que debe ser una palabra completa. |
| [atributo^=valor] | Coincide con todos los elementos cuyo valor de atributo comienza con el valor especificado. |
| [atributo$=valor] | Coincide con todos los elementos cuyo valor de atributo termina con el valor especificado. |
| [atributo*=valor] | Coincide con todos los elementos cuyo valor de atributo contiene el valor especificado. |
El código html utilizado en este artículo:
<!-- html-->
<div>
<span class="title">css属性选择器</span>
<ul>
<li class="myli title">0</li>
<li class="title" id="li">1</li>
<li class="myli-2-end">2</li>
<li class="start-myli-3">3</li>
<li>与世无争的咸鱼</li>
<li class="my">5</li>
</ul>
</div>
[atributo]: seleccione el elemento que contiene este atributo
*[atributo]: * representa todas las etiquetas, es decir, selecciona todas las etiquetas que contienen atributo
/*选取所有包含class属性的元素 css*/
*[class] {
background-color: skyblue;
}
Efecto:
Selecciona la etiqueta con id
/*选取所有包含id属性的元素 css*/
*[id] {
background-color: skyblue;
}
li[clase]: seleccione elementos con atributos de clase en li (en comparación con *, solo seleccione etiquetas li)
/*选取li中包含class属性的元素 css*/
li[class] {
background-color: skyblue;
}
Efecto:
[atributo=valor]: seleccione el elemento que contiene este atributo
Cabe señalar aquí que atributo=valor es una coincidencia exacta. Si hay varios valores para el atributo, no se seleccionará. En este ejemplo, la clase del primer li contiene el nombre de clase "myli", por lo que no será seleccionado.
/*选取所有class=title的元素 css*/
*[class="title"] {
background-color: skyblue;
}
Efecto:
[atributo~=valor]: selecciona elementos cuyo valor de atributo contiene el vocabulario especificado
En comparación con [atributo=valor], aquí hay una coincidencia incompleta, siempre que el atributo contenga valor, el primer li se puede seleccionar en este ejemplo
/*选取所有class中包含值为title的元素 css*/
*[class~="title"] {
background-color: skyblue;
}
Efecto:
[atributo|=valor]: selecciona elementos con un valor de atributo que comienza con el valor especificado, que debe ser una palabra completa.
Nota: El elemento con class="myli" no se seleccionará aquí, es decir, si hay varios valores para el atributo, no coincidirá. En este ejemplo, la clase del primer li contiene myli y title no será seleccionado, lo cual es muy detallado
/*选取所有class中以myli开头的li css*/
li[class|="myli"] {
background-color: skyblue;
}
Efecto:
seleccione coincidir con mi
/*选取所有class中以my开头的li css*/
li[class|="my"] {
background-color: skyblue;
}
Efecto:
[atributo^=valor]: coincide con todos los elementos cuyo valor de atributo comienza con el valor especificado.
En comparación con [atributo|=valor], el uso de ^ se puede seleccionar siempre que comience con valor
/*选取所有class中以my开头的li css*/
li[class^="my"] {
background-color: skyblue;
}
Efecto:
Si no es exactamente igual al valor, no se emparejará. En este momento, al modificar la coincidencia con el campo myli, no se seleccionará el último li.
/*选取所有class中以myli开头的li css*/
li[class^="myli"] {
background-color: skyblue;
}
Efecto:
[atributo$=valor]: Coincide con todos los elementos cuyo valor de atributo termina con el valor especificado.
Al contrario de ^, $ coincide con el carácter final
/*选取所有class中以end结尾的li css*/
li[class$="end"] {
background-color: skyblue;
}
Efecto:
[atributo*=valor]: coincide con todos los elementos cuyo valor de atributo contiene el valor especificado.
/*选取所有class中包含myli的li css*/
li[class*="myli"] {
background-color: skyblue;
}
Efecto:
Además, el método de escritura de selección condicional múltiple
/*选取所有class中即包含myli和title的li css*/
li[class*="myli"][class*="title"] {
background-color: skyblue;
}
Efecto:
