Selectores de CSS

Un selector de CSS es un patrón utilizado para coincidir con elementos en el documento HTML. Las reglas de estilo asociadas se aplicarán a los elementos que coinciden con el patrón del selector.

¿Qué es un selector

El selector es una de las características más importantes de CSS, ya que se utiliza para seleccionar elementos en la página web para aplicar estilos. Puede definir selectores de múltiples formas.

Selector común

Selector común (usado*El asterisco o asterisco representa) el ajuste de cada elemento individual en la página. Si el elemento objetivo tiene otras condiciones, se puede omitir el selector común. Este selector se utiliza generalmente para eliminar el margen y relleno predeterminados de los elementos para pruebas rápidas.

*　{
　　　　margin: 0;
　　　　padding: 0;
　　}

*Las reglas de estilo dentro del selector se aplicarán a cada elemento del documento.

selectores de tipo de elemento

selectores de tipo de elemento harán coincidir cada ejemplo de elemento en el árbol del documento con el nombre correspondiente del tipo de elemento.

p {
　　　　color: azul;
　　}

pLas reglas de estilo del selector se aplicarán a<p>cada elemento del documento y lo hace azul, sin importar su posición en el árbol del documento.

selector de ID

selectores de ID se utilizan parasingularoúnicoelementos definen reglas de estilo.

La definición de selector de ID es un signo de número (#)#), seguido del valor de ID.

#error {
　　　　color: red;}

Esta regla de estilo se aplicará aidlos elementos que tienen el atributo establecido se presentan el texto en rojoerror.

selector de clase de clase

selectores de claseclasscualquier elemento HTML con el atributo. Todos los elementos con esta clase se formatearán según las reglas definidas.

se usa un punto (.) seguido de la definición de valor de clase.

.blue {
　　　　color: azul;
　　　　　　}

Las reglas de estilo anteriores se aplicarán aclassel texto de cada elemento del documento con el atributo establecido se muestra en azulblue. Puede hacer que sea más específico. Por ejemplo:

p.blue {
　　　　color: azul;
　　　　}

las reglas de estilo del selectorp.bluesolo<p>asignaclasslos elementos que tienen el atributo establecido se presentan en azulbluey no tienen influencia en otros párrafos.

selectores de descendiente

Cuando necesite seleccionar un elemento que es descendiente de otro elemento, puede usar estos selectores. Por ejemplo, si solo desea ubicar los puntos de ubicación que contienen las listas sin orden, sin ubicar todos los elementos de ubicación.

ul.menu li a {
　　　　texto-decoration: none;
　　　　}
h1　em {
　　　　color: green;
　　　　}

Reglas de estilo dentro del selectorul.menu li asólo se aplica a<a>que contiene una claselista sin ordenlos que son elementos anclados.menuy no tienen influencia en otros enlaces del documento. Del mismo modo,h1 emLas reglas de estilo dentro del selector solo se aplican a<em>los elementos que contiene heading<h1>.

selectores de hijo

Los selectores de hijo solo se pueden usar para seleccionar elementos que son directos hijos de ciertos elementos. Los selectores de hijo consisten en dos o más selectores, separados por un signo mayor (es decir>separados por puntos y comas. Por ejemplo, puede usar estos selectores para seleccionar el primer nivel de elementos de una lista anidada con múltiples niveles.

ul > li {
　　　　list-style: square;
　　　　}
ul > li ol {
　　　　list-style: none;
　　　　}

Reglas de estilo dentro del selectorul > lisólo se aplica a<li>como<ul>Los elementos que son elementos hijos directos de un elemento y que no tienen influencia en otros elementos de la lista.

Selector de hermano adyacente

El selector de hermano adyacente se puede usar para seleccionar elementos de同级. La sintaxis del selector es similar a: E1 + E2donde E2es el objetivo del selector.

h1 + pLos selectores en el siguiente ejemplo<p>sólo en<h1>y<p>elemento en el árbol del documento tiene el mismo padre y<h1>sigue a este<p>se seleccionan los elementos en el caso de que el elemento anterior<h1>Los párrafos después del título solo tienen reglas de estilo asociadas.

h1　+　p {
　　　　color: azul;
　　　　fuente-tamaño:　18px;
　　　　}
ul.task　+　p {
　　　　color: #f0f;
　　　　texto-sangría:　30px;
　　　　}

Selector de hermano general

El selector de同级 general es similar al selector de同级 adyacente (E1 + E2）similar, pero no tan estricto. El selector de同级 general se compone de dos selectores simples, que se separan por el signo de admiración (〜）se separan por caracteres. Se puede escribir así: E1〜E2donde E2es el objetivo del selector.

El selector en el siguiente ejemploh1 ∼ pse seleccionará<p>antes del elemento<h1>Todos los elementos, en los que todos los elementos comparten el mismo padre en el árbol del documento.

h1　∼ p {
　　　　color: azul;
　　　　fuente-tamaño:　18px;
　　　　}
ul.task ∼ p {
　　　　color: #f0f;
　　　　texto-sangría:　30px;
　　　　}

Hay más selectores, como selectores de atributo, pseudoclases, pseudoelementos. Discutiremos estos selectores en los próximos capítulos.

Selector agrupado

Los múltiples selectores en la hoja de estilo suelen compartir las mismas declaraciones de reglas de estilo. Puedes agruparlos en una lista separada por comas para reducir al máximo el código en la hoja de estilo. También puede evitar que repitas las mismas reglas de estilo una y otra vez.

h1　{
　　　　fuente-tamaño:　36px;
　　　　fuente-peso: normal;
　　　}
h2　{
　　　　fuente-tamaño:　28px;
　　　　fuente-peso: normal;
　　　}
h3　{
　　　　fuente-tamaño:　22px;
　　　　fuente-peso: normal;
　　　}

Como puedes ver en el ejemplo anterior, las mismas reglas de estilofuente-peso: normal;es compartido por la selecciónh1,h2yh3Por lo tanto, se puede dividir en una lista separada por comas, como se muestra a continuación:

h1, h2, h3　{fuente-peso: normal;}
h1　{fuente-tamaño:　36px;}
h2　{fuente-tamaño:　28px;}
h3　{fuente-tamaño:　22px;}