2. Una mirada rápida a CSS: selectores de CSS, pseudoclases, herencia y cascada

1. Selectores de CSS

Seleccionador básico:

Selector de etiqueta: seleccione a través de la etiqueta con el mismo nombre, y la etiqueta con el mismo nombre puede establecer un estilo público

<style>
  h3 {
        
        color:red;}
  p {
        
        color:blue;}
</style>
<p>段落</p>

selector de id: seleccione por el atributo id de la etiqueta

<style>
  #id1 {
        
        color:red;}
</style>
<p id="id1">段落</p>

Selector de nombre de clase: seleccione por atributo de clase

<style>
  .pa {
        
        color:blue;}
  .paa {
        
        color:red;}
</style>
<p class="pa">段落</p>
<p class="pa pas">段落</p>

Selección de comodines: seleccione todas las etiquetas, incluido html, generalmente se usa para borrar el estilo predeterminado
```
<style>
  * {
        
        color:blue;}
</style>
<p>段落</p>
```

Selector avanzado:

Selector de descendientes: tenga en cuenta que la relación descendiente puede no ser una relación padre-hijo
```
<style>
  div ul li {
        
        color:blue;}
</style>
```
Selector de intersección: los selectores múltiples están conectados directamente sin ningún símbolo en el medio
```
<style>
  p.par {
        
        color:blue;}
</style>
```

Selector de unión: selectores de selección múltiple, separados por comas

<style>
  #id, .pa, p {
        
        color:blue;}
</style>

2. Pseudo-clases para selectores

Pseudo-clase para la etiqueta <a>

    <style>
        a:link {
      
      
            color: red;
        }
        a:visited {
      
      
            color: green;
        }
        a:hover {
      
      
            color: yellow;            
        }
        a:active {
      
      
            color: blue;         
        }
    </style>
    <a href="https://www.baidu.com">点击跳转到百度</a>

Los selectores ordinarios, como el intervalo, tienen pseudoclases activas y flotantes

Orden de escritura: la etiqueta <a> tiene 2~3 estados de activación, link、visited、hover、activesiga

3. Herencia y cascada de CSS

Herencia: las etiquetas descendientes heredan el estilo de texto de los ancestros
Cascada: el estilo establecido por el selector es sobrescrito por otros selectores, es decir, en cascada

selector de peso
	selector de identificación	seleccionador de clase	selector de etiquetas
Pesos	100	010	001
número de selectores	a	b	C
peso total	100a+10b+c=abc

Si ninguno de los selectores selecciona la etiqueta objetivo, la prioridad del selector más cercano a la etiqueta objetivo es mayor, es decir, el principio de proximidad, cuanto más específico es el selector, mayor es el peso; si los selectores tienen el mismo nivel, el peso se calcula según el orden de id>clase>etiqueta