Diferentes selectores en CSS

Generalmente, estos selectores se usan comúnmente

Selector de etiquetas: para una clase de etiquetas
Selector de ID: uso para una etiqueta específica
selector de clase: para todas las etiquetas que quieras usar
Selector universal (comodín): aplicable a todas las etiquetas (no recomendado)

Directorio de artículos

1. Selector de pestañas

estructura

nombre de la etiqueta {nombre del atributo: valor del atributo;}

efecto

A través del nombre de la etiqueta, encuentre todas las etiquetas de clase en la página y configure el estilo.

punto importante

El selector de etiquetas selecciona una categoría de etiquetas, no una sola.
El selector de etiquetas puede encontrar la etiqueta correspondiente sin importar qué tan profunda sea la relación de anidamiento.

lista de códigos

<html>
    <head>
        <style>
            
            div {
      
      
                color:red;
            }
        </style>
    </head>
    <body>
        <!-- 这些p标签字体颜色都会设置red颜色。 -->
      <p>1111111</p>
      <p>2222222</p>
      <p>3333333</p>
    </body>
</html>

2. Selector de clases

estructura

.nombre de clase {nombre de propiedad: valor de propiedad;}
efecto

A través del nombre de la clase, busque todas las etiquetas con este nombre de clase en la página y configure el estilo.
punto importante
1. Hay un atributo de clase en todas las etiquetas, y el valor de atributo del atributo de clase se denomina nombre de clase (similar al nombre)
2. Los nombres de las clases pueden consistir en números, letras, guiones bajos y guiones, pero no pueden comenzar con números o guiones.
3. Una etiqueta puede tener varios nombres de clase al mismo tiempo,
4. Los nombres de las clases están separados por espacios. Los nombres de las clases pueden repetirse. Un selector de clases puede seleccionar varias etiquetas al mismo tiempo.
lista de códigos

<html>
    <head>
        <style>
           	<!-- 设置类名为one的字体颜色 -->
            .one {
      
      
                color:red;
            }
            <!-- 设置类名为one和two的字体颜色 -->
            .one .two {
      
      
                color:red;
            }
        </style>
    </head>
    <body>
        
      <p class="one">1111111</p>
      <p class="two">2222222</p>
      <p class="two">3333333</p>
    </body>
</html>

selector 3.id

estructura

#id {nombre de la propiedad: valor de la propiedad;}
efecto

A través de la identificación, busque la etiqueta con esta identificación en la página y configure el estilo.
punto importante
1. atributo id en todas las etiquetas
2. El valor del atributo de identificación es similar al número de identificación, que es único y no se puede repetir en una página.
3. Solo puede haber un valor de atributo d en una etiqueta
4. Un selector de ID solo puede seleccionar una etiqueta
lista de códigos

<html>
    <head>
        <style>
           	<!-- 设置id为one的字体颜色 -->
            #one {
                color:red;
            }
        </style
    </head>
    <body>
        
      <p id="one">1111111</p>
      <p id="two">2222222</p>
    </body>
</html>

4. Selector comodín

estructura

*{nombre de la propiedad:valor de la propiedad;}
efecto

Encuentra todas las etiquetas en la página y establece el estilo.
punto importante
1. Rara vez se usa en desarrollo y solo se usa en casos muy especiales.
2. Se utiliza para eliminar el margen predeterminado y el relleno de la etiqueta (siguiente explicación)
lista de códigos

<html>
    <head>
        <style>
           	<!-- 所有的标签设置字体为red -->
            * {
                color:red;
            }
        </style
    </head>
    <body>
        
      <p id="one" id="one">1111111</p>
      <p id="two">2222222</p>
      <p>333333333</p>
      <span>333333333</span>
    </body>
</html>

5. Selector de descendientes

estructura

selector1>selector2{nombre de propiedad:valor de propiedad;}
efecto

De acuerdo con la relación de anidamiento de las etiquetas HTML, seleccione elementos que cumplan las condiciones en los descendientes del elemento padre (hijo, nieto, bisnieto...)
resultado

Entre los hijos (hijos) de la etiqueta encontrada por el selector 1, busque la etiqueta que satisfaga al selector 2 y establezca el estilo
punto importante
1. Los niños incluyen solo: etiquetas de niños
2. En el selector secundario, el selector está separado del selector por >
lista de códigos

<html>
    <head>
        <style>
           /* 后代选择器 * */
            div>p {
                color:red;
            }
        </style
    </head>
    <body>
         <div>
            /*p标签的字体颜色设置为red*/
             <p>333333333</p>
            <div>
            	 /*这个p标签的字体颜色也会被设置为red*/
            	<p>333333333</p>
            </div>
         </div>
    </body>
</html>

6. Selector de niños

estructura

Selector 1 Selector 2 { nombre del atributo: valor del atributo; }
efecto

De acuerdo con la relación de anidamiento de las etiquetas HTML, seleccione elementos que cumplan las condiciones en los elementos secundarios del elemento principal
resultado

Entre los descendientes de la etiqueta encontrada por el selector 1 (hijo, nieto, bisnieto...), busque la etiqueta que satisfaga al selector 2 y establezca el estilo
punto importante
1. Los descendientes incluyen: hijo, nieto, bisnieto... En el selector de descendencia,
2. El selector está separado del selector por un espacio
lista de códigos

<html>
    <head>
        <style>
           /* 子代选择器 * */
            div>p {
                color:red;
            }
        </style
    </head>
    <body>
         <div>
            /*只有这个p标签的字体颜色设置为red*/
             <p>333333333</p>
            <div>
            	 /*这个p标签的字体不会被修改*/
            	<p>333333333</p>
            </div>
         </div>
    </body>
</html>

7. Selector de unión

estructura

selector 1, selector 2 {nombre de propiedad: valor de propiedad;}
efecto

Seleccione varios grupos de etiquetas al mismo tiempo y establezca el mismo estilo.
resultado

Entre los descendientes de la etiqueta encontrada por el selector 1 (hijo, nieto, bisnieto...), busque la etiqueta que satisfaga al selector 2 y establezca el estilo
punto importante
1. Cada conjunto de selectores en el selector de unión está separado por ","
2. Cada conjunto de selectores en un selector de unión puede ser un selector base o un selector compuesto
3. Cada conjunto de selectores en el selector de unión generalmente se escribe uno por línea para mejorar la legibilidad del código.
lista de códigos
```
<html>
    <head>
        <style>
           /* 并集选择器 * */
            h1,h3,p {
                color:red;
            }
        </style
    </head>
    <body>
            /* 只会设置h1,h3,p标签的字体颜色为red * */
      		<h1>h1</h1>
            <h2>h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <p>p</p>
            <span></span>
    </body>
</html>
```
8. Selector de intersección
- estructura
  
  selector 1, selector 2 {nombre de propiedad: valor de propiedad;}
- efecto
  
  Diseña etiquetas más precisas.
- resultado
  
  Una etiqueta puede tener tanto una identificación como una clase, y el estilo de la etiqueta se puede configurar de manera más precisa a través del selector de intersección.
- punto importante
  1. Cada conjunto de selectores en el selector de intersección está separado por ","
  2. Cada conjunto de selectores en un selector de intersección puede ser un selector base o un selector compuesto
  3. Cada conjunto de selectores en el selector de intersección generalmente se escribe uno por línea para mejorar la legibilidad del código.
- lista de códigos

<html>
    <head>
        <style>
           /* 交集选择器 * */
            p {
                color:red;
            }
        </style
    </head>
    <body>
            /*  * */
      		<p>a</p>
            <p>b</p>
            <p>c</p>
            <p>d</p>
    </body>
</html>

8. hover selector de pseudoclase

estructura

Selector: hover {nombre de propiedad: valor de propiedad;}
efecto

Seleccione el estado en el que el mouse se desplaza sobre el elemento y establezca el estilo.

Resumir

Los diferentes selectores tienen diferentes prioridades.