Al escribir un proyecto recientemente, descubrí que los selectores de hermanos se usan a menudo. Aquí hay un resumen de los selectores de hermanos que se usan comúnmente. A menudo lo uso para agregar un estilo específico a B si existe A. Si A no existe y B es otro estilo , use selectores de hermanos. El dispositivo es muy conveniente como referencia.
html:
<div>
<h2>标题部分</h2>
<p>111</p>
<p>222</p>
<p class="on">333</p>
</div>
- Selector de hermanos "+"
Indica los elementos hermanos adyacentes a un elemento, es decir, uno al lado del otro, y el seleccionado es único
Seleccione la primera p debajo de h2: h2+p{ }
- Selector de hermanos "~"
Indica todos los elementos especificados en el mismo nivel después de un elemento, todos los cuales están seleccionados
Seleccione todos los p debajo de h2: h2~p{ }
- Si desea seleccionar un elemento hermano específico, debe usar "~" y ".nombre de clase" juntos
Seleccione el elemento con el nombre de la clase debajo de h2: h2~.on{ }