Para usar CSS para lograr un control uno a uno, uno a muchos o muchos a uno de los elementos en las páginas HTML, se necesitan selectores de CSS.
(I) ¿Qué es un selector?
Cada definición de estilo CSS consta de dos partes, la forma es la siguiente: [código] selector {estilo} [/ código] La parte antes de {} es el "selector".
El "selector" especifica el objeto del "estilo" en {}, es decir, a qué elementos de la página web se aplica el "estilo".
(Ii) Cinco selectores CSS
⑴Selector de etiquetas (selector de elementos)
⑵Selector de ID (unicidad, una referencia)
⑶ selector de clase (selector de una sola clase, selector de varias clases)
⑷Selector de atributos (selección de atributo simple, selección de atributo específico, selección de atributo parcial, selección de atributo específico)
⑸ Selector derivado (selector de descendientes), selector de hijos (selector de hijos), selector de hermanos adyacentes (selector de hermanos adyacentes)
(Iii) Selector de elementos (selector de etiquetas)
Una página HTML completa se compone de muchas etiquetas diferentes. Selector de etiquetas: se refiere al uso de nombres de etiquetas HTML como selectores, categorizar por nombre de etiqueta y asignar un estilo CSS unificado a un cierto tipo de etiqueta en la página.
Si establece el estilo HTML, el selector normalmente será un elemento HTML, como p, h1, em, a, o incluso el propio html.
P.ej:
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
El código css anterior agregará un fondo negro a todo el documento; establezca el tamaño de fuente de todos los elementos p en 30 píxeles y agregará un fondo gris; agregue un fondo rojo a todos los elementos h2 en el documento.
㈣Selector de ID
⑴El selector de ID permite especificar el estilo de forma independiente de los elementos del documento.
⑵ El selector de ID puede especificar estilos específicos para elementos HTML marcados con ID específicos. El elemento se selecciona en función del ID del elemento, que es único, lo que significa que el mismo ID solo puede aparecer una vez en la misma página del documento.
El selector de id está definido por "#".
Por ejemplo: en CSS, los siguientes dos selectores de ID, el primero puede definir el color del elemento como rojo, y el segundo puede definir el color del elemento como amarillo:
#red{color：red；}
#yellow{color：yellow；}
En el código HTML a continuación, el elemento p con el atributo id de rojo se muestra en rojo, y el elemento p con el atributo id de verde se muestra en verde.
<p id="red">这个段落是红色。</p>
<p id="yellow">这个段落是黄色。</p>
㈤Selector de clases
El selector de clases usa el nombre de la clase para seleccionar el elemento. La premisa es definir un atributo de clase para el elemento en HTML, class="类名"y luego usar "." Para identificarlo, seguido del nombre de la clase. **
(1) Selector de clase única
Los selectores de clases permiten especificar estilos de forma independiente de los elementos del documento. El selector se puede utilizar solo o en combinación con otros elementos.
① Modificar código HTML
Antes de usar el selector de clases, debe modificar el marcado del documento específico para que el selector de clases pueda funcionar correctamente. Para asociar el estilo del selector de clases con el elemento, la clase debe especificarse como un valor apropiado.
Consulte el siguiente código HTML:
<h1 class="important">
This heading is very important
</h1>
<p class="impportant">
This paragraph is very important.
</p>
En el código anterior, las clases de dos elementos se designan como importantes: el primer encabezado (elemento h1) y el segundo párrafo (elemento p).
② Gramática
Usamos la siguiente sintaxis para aplicar estilos a estos elementos categorizados, es decir, hay un punto (.) Antes del nombre de la clase, y luego se combina con un selector de comodines:
.important {color:red;}
Si solo desea seleccionar todos los elementos con el mismo nombre de clase, puede ignorar el selector de comodines en el selector de clase, lo que no tiene ningún efecto negativo:
.important {color:red;}
③Selector de elementos combinados
Los selectores de clases se pueden utilizar junto con los selectores de elementos.
♧ Por ejemplo, haga que los párrafos aparezcan como texto rojo:
p.important {color:red;}
El selector ahora coincidirá con todos los elementos p cuyo atributo de clase contiene importantes, pero no coincidirá con ningún otro tipo de elementos, independientemente de si tienen este atributo de clase.
El selector p.important se interpreta como: "todos los párrafos cuyo valor de atributo de clase es importante". Debido a que el elemento h1 no es un párrafo, el selector de esta regla no coincide con él, por lo que el elemento h1 no se convertirá en texto rojo.
♧ Por ejemplo: para especificar diferentes estilos para el elemento h1, puede usar el selector
h1.important：
p.important {color:red;}
h1.important {color:blue;}
⑵Selector multitipo
En HTML, un valor de clase puede contener una lista de palabras, separadas por espacios.
Por ejemplo, si desea marcar un elemento en particular como importante y una advertencia al mismo tiempo, puede escribir:
<p class="important warning">
This paragraph is very important warning.
</p>
Nota: El orden de estas dos palabras no importa y se puede escribir como advertencia importante.
Suponga que todos los elementos cuya clase es importante están en negrita y que todos los elementos cuya clase es una advertencia están en cursiva, y que todos los elementos cuya clase contiene importantes y advertencias tienen un fondo plateado.
Puedes escribir:
.important {font-weight:bold;}
.warning{font-style:italic;}
.important .warning{background:silver;}
Al vincular dos selectores de clase, solo los elementos que contienen estos nombres de clase se pueden seleccionar al mismo tiempo (el orden de los nombres de clase no está limitado).
Si un selector de clases múltiples contiene un nombre de clase que no está en la lista de nombres de clase, la coincidencia fallará.
㈥Selector de atributos
El selector de atributos puede seleccionar elementos en función de sus atributos y valores de atributo.
⑴Selección de atributos simple
Si desea seleccionar un elemento con un determinado atributo, independientemente del valor del atributo, puede utilizar un selector de atributo simple.
Ejemplo 1: Para cambiar todos los elementos que contienen el título (título) a rojo, puede escribir:
[title] {color:red;}
Ejemplo 2: aplique solo estilos a los anclajes (elementos a) con atributos href:
a[herf] {color:red;}
Ejemplo 3: Para seleccionar en función de múltiples atributos, simplemente vincule los selectores de atributos.
Para establecer el texto de los hipervínculos HTML que tienen los atributos href y title en rojo, puede escribir:
a[herf] [title] {color:red;}
Ejemplo 4: aplique estilos a todas las imágenes con atributos alt para resaltar estas imágenes válidas:
img[alt] {border:5px solid red;}
⑵Seleccione según el valor de atributo específico
Ejemplo 1: Para cambiar el hipervínculo a un documento específico en el servidor web en rojo, puede escribir:
a [href="http://www.baidu.com"] {color:red;}
Ejemplo 2: vincular varios selectores de valor de atributo para seleccionar un documento.
a [href="http://www.baidu.com"] [title="baidu"] {color:red;}
Esto cambiará el texto del primer hipervínculo a rojo, pero el segundo o tercer vínculo no se verá afectado:
Nota: Este requisito de formato debe coincidir exactamente con el valor del atributo.
Si el valor del atributo contiene una lista de valores separados por espacios, la coincidencia puede ser problemática.
⑶Seleccione según algunos valores de atributo
Si necesita seleccionar una palabra en la lista de palabras en el valor del atributo, debe usar una tilde (~).
Para seleccionar el elemento que contiene importantes en el atributo de clase, puede hacerlo con el siguiente selector:
p[class~="important"] {color:yellow;}
Nota: Si se omite la tilde, significa que se debe completar la coincidencia del valor exacto.
⑷Tipo de selección de atributo específico
Por ejemplo:[lang |="en"] {color:red;}
La regla anterior seleccionará todos los elementos cuyo atributo lang sea igual a en o que comiencen con en-. Por lo tanto, se seleccionarán los tres primeros elementos de la siguiente etiqueta de ejemplo, pero no se seleccionarán los dos últimos elementos:
(Vii) Selector de descendientes
⑴ El selector de descendientes también se denomina selector de contención. El selector de descendientes puede seleccionar elementos que son descendientes de un elemento.
(2) En los selectores descendientes, el selector del lado izquierdo de la regla incluye dos o más selectores separados por espacios. El espacio entre los selectores es un combinador.
⑶ Cada combinador de espacios se puede interpretar como "... encontrado en ...", "... como parte de ...", "... como descendiente de ...", pero el selector debe leerse de derecha a izquierda.
Ejemplo: para aplicar estilos solo al elemento em en el elemento h1, puede escribir:
h1 em {colopr:red;}
⑴ La regla anterior cambiará el texto del elemento em que es descendiente del elemento h1 a rojo. Esta regla no seleccionará otros textos em (como em en un párrafo o una cita en bloque).
⑵ El selector h1 em puede interpretarse como "cualquier elemento em que sea descendiente del elemento h1". Si desea leer el selector de izquierda a derecha, puede cambiarlo a la siguiente declaración: "Todos los h1 que contengan em aplicarán el siguiente estilo al em".
solicitud:
Puede hacer posibles tareas imposibles en HTML. Suponga que hay un documento con una barra lateral y un área principal. El fondo de la barra lateral es azul y el fondo del área principal es blanco. Ambas áreas contienen una lista de enlaces. No puede establecer todos los enlaces en azul, porque entonces los enlaces azules en la barra lateral no serán visibles. La solución es utilizar selectores descendientes. En este caso, puede especificar el valor del atributo de clase de la barra lateral para el div que contiene la barra lateral y establecer el valor del atributo de clase del área principal en contenido principal.
Escribe el siguiente estilo:
div.sidebar {background:blue;}
div.maincontent {background:white;]
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
㈧selector de elementos secundarios
⑴ Los selectores secundarios solo pueden seleccionar elementos que son elementos secundarios de un determinado elemento.
⑵ No desea seleccionar ningún elemento descendiente, pero desea limitar el alcance, solo seleccione los elementos secundarios de un elemento, utilice el selector secundario (selector secundario).
(3) El sub-selector usa el signo mayor que (sub-combinador). Puede haber un espacio en blanco en ambos lados del sub-combinador, que es opcional.
Por ejemplo: para seleccionar un elemento fuerte que es solo un elemento hijo del elemento h1, puede escribir:
h1 > strong {color:red;}
Si se lee de derecha a izquierda, el selector h1> strong se puede interpretar como "seleccionar todos los elementos fuertes que son elementos secundarios de h1".
Esta regla cambiará los dos elementos fuertes debajo del primer h1 a rojo, pero el fuerte en el segundo h1 no se verá afectado:
∨ Selector hermano vecino
⑴El selector de hermanos adyacente puede seleccionar el elemento inmediatamente después de otro elemento, y ambos tienen el mismo elemento principal.
⑵ El selector de hermanos adyacentes usa el signo más (+), que es el combinador de hermanos adyacentes. Al igual que los subcombinadores, puede haber espacios en blanco junto a los hermanos adyacentes.
Por ejemplo: si desea aumentar el margen superior del párrafo que aparece inmediatamente después del elemento h1, puede escribir:
h1 + p {margin-top:50px;}
Este selector dice: "Seleccione el párrafo que aparece inmediatamente después del elemento h1. Los elementos h1 y p tienen el mismo elemento principal".
Explicación específica: consulte el siguiente fragmento de árbol del documento:
En el fragmento anterior, el elemento div contiene dos listas: una lista desordenada y una lista ordenada. Cada lista contiene tres elementos de lista. Las dos listas son hermanos adyacentes y los elementos de la lista en sí también son hermanos adyacentes.
Sin embargo, los elementos de la lista en la primera lista y los elementos de la lista en la segunda lista no son hermanos adyacentes, porque los dos conjuntos de elementos de la lista no pertenecen al mismo elemento principal (como máximo, solo se pueden contar como primos).
En pocas palabras: ul y ol son hermanos adyacentes, y los elementos de la lista en ul y los elementos de la lista en ol no son hermanos adyacentes.
Actualmente estoy trabajando en el desarrollo de front-end. Si desea aprender tecnología de desarrollo de front-end ahora, y tiene alguna pregunta sobre métodos de aprendizaje, rutas de aprendizaje, eficiencia de aprendizaje, etc. durante el proceso de comenzar a aprender front-end, puede solicitar unirse a mi front-end Falda de intercambio de aprendizaje: 421374697. Reúne a algunos principiantes, cambiadores y principiantes que son de autoaprendizaje front-end.También tengo algunos mapas mentales de aprendizaje front-end compilados durante el tiempo que estuve haciendo tecnología front-end, preguntas de entrevistas de fábrica de front-end, tutoriales de código fuente de desarrollo front-end y documentos PDF. Se pueden obtener libros y tutoriales del cerdo de la falda si los necesita.
Nota: Solo el segundo elemento de dos hermanos adyacentes se puede seleccionar con un combinador. Mira el selector a continuación:
li + li {font-weight:bold;}
El selector anterior solo pondrá en negrita el segundo y tercer elemento de la lista. El primer elemento de la lista no se ve afectado.