Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Selector de estilo, utilizado para seleccionar elementos html en la página para agregar estilos CSS.

Ordenar renderizando el rendimiento de mayor a menor Seguido por:

IDENTIFICACIÓN Selector #id

Seleccione elementos por su atributo de identificación, distingue entre mayúsculas y minúsculas

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Pero no se recomienda su uso porque:

• El selector de identificación tiene mayor prioridad y es inconveniente restablecer el estilo.
• El selector de identificación es utilizado principalmente por JS.

selector de clase .class

A través del atributo de clase del elemento.estiloEl nombre de clase del elemento seleccionado distingue entre mayúsculas y minúsculas.

El selector de CSS más recomendado es que los selectores de clases tienen una semántica sólida y son fáciles de restablecer los estilos.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Se pueden agregar varias clases de estilo al mismo elemento, separadas por espacios.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

selector de etiquetas 标签名

Seleccione elementos por sus nombres de etiquetas, sin distinguir entre mayúsculas y minúsculas

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

No recomendado debido al bajo rendimiento del selector de etiquetas y a los altos costos de mantenimiento.

selector comodín *

Seleccione todos los elementos html de la página excepto los pseudoelementos. A menudo se usa para borrar el estilo predeterminado del navegador, pero no se recomienda porque consume rendimiento.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

selector de atributos [属性]

Seleccione elementos en función de sus atributos y valores de atributos. Los atributos no distinguen entre mayúsculas y minúsculas y los valores de los atributos distinguen entre mayúsculas y minúsculas.

Selector de pseudoclase :状态名

Seleccionar elementos en función de sus diferentes estados.

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Utilice selectores de pseudoclases en listas

n significa 0,1,2,3,4,5,6,7,8...(No es válido cuando n es menor que 1, porque no se seleccionará n = 0)

Utilice selectores de pseudoclases en tablas

• tr:nth-child(odd)：Coincide con las filas 1, 3 y 5 de la tabla, lo que equivale atr:nth-child(2n+1)。
• tr:nth-child(even): Coincide con las filas 2, 4 y 6 de la tabla, lo que equivale atr:nth-child(2n)。

• Ejemplo práctico de selector de pseudoclases

  • Utilice:nth-child() para implementar rayas de cebra, alineación de bordes, resaltado de lista de rango especificado y diseño adaptativo de lista dinámica
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS implementa visualización y ocultación dinámicas (el maravilloso uso de :checked y :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Uso: objetivo para expandir más, contraer y cambiar de pestañahttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Uso: marcador de posición mostrado para lograr la interacción con el estilo MaterialDesign
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Utilice: marcador de posición mostrado para verificar el valor nulo y el mensaje no puede estar vacío.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :expansión y colapso de implementos comprobados
    https://demo.cssworld.cn/selector/9/2-1.php

  • :cambio de pestaña de implementos comprobados
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked implementa botones de radio personalizados, casillas de verificación, interruptores, controles de etiquetas y selecciones de radio de materiales
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Utilice :valid y :invalid para implementar la validación de formularios nativos
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Utilice :required y :optional para implementar el texto del mensaje de verificación del formulario
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :lista desplegable de implementos focus-within
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Cuando el cuadro de entrada esté enfocado, resalte la etiqueta al frente (consulte el método 5 en el enlace)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Pase el mouse para mostrar la imagen ampliada o haga clic con el mouse para mostrar la imagen ampliada
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty oculta elementos vacíos y campos faltantes consejos inteligentes
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child implementa una animación de carga dinámica de múltiples estados
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen permite la visualización en pantalla completa de las imágenes en las que se hace clic
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Selector de pseudoelementos ::

  Se utiliza para seleccionar y diseñar parte de un elemento, en lugar de todo el elemento.

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before y::after

  Debe usarse junto con el atributo de contenido para establecer el contenido antes y después del elemento. Para más detalles, consulte.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Ejemplos prácticos de uso común:

  • Agregue íconos antes y después de los elementos (la magia de ::before y ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS utiliza inteligentemente ::after y ::before para implementar la navegación de categorías verticales
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • CSS usa hábilmente ::after para lograr una animación de cambio de pestaña
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Iniciales

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line primera fila

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Arrastra el ratón para seleccionar el área.

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder marcador de posición de texto

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Selector de relaciones

  Seleccionar elementos en función de las relaciones entre elementos.

  selector de descendientes >

  La etiqueta de primer nivel envuelta dentro de una etiqueta es su descendiente.

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  selector de descendientes 空格

  Todas las etiquetas dentro de una etiqueta son sus descendientes.

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  selector de hermanos ~

  Bajo el mismo elemento principal, seleccione el elemento especificadodespuésTodos los elementos del mismo nivel, por lo que estrictamente hablando, debería llamarse 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS no 前面兄弟选择器 , puede consultar el siguiente enlace para simular la implementación
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  selector de hermano vecino +

  Selecciona el siguiente elemento inmediatamente después de un elemento

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Selector de intersecciones

  Seleccione elementos en la página que coincidan con múltiples selectores al mismo tiempo

  • No hay espacios entre selectores (los espacios son selectores descendientes)
  • Si existe un selector de etiquetas, el selector de etiquetas debe colocarse primero

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  selector sindical ,

  Entre múltiples selectores, siempre que uno de ellos esté satisfecho, será seleccionado.

  • Usado entre múltiples selectores , separado

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4