[分享]css兄弟选择器有哪些

CSS 兄弟选择器是一种 CSS 选择器，允许您选择同级元素。它的语法使用 + 和 ~ 符号。兄弟选择器的 + 符号用于选择紧接在指定元素后面的元素。/ 选择紧接在 class"first&...

CSS 兄弟选择器是一种 CSS 选择器，允许您选择同级元素。它的语法使用 + 和 ~ 符号。

兄弟选择器的 + 符号用于选择紧接在指定元素后面的元素。

/* 选择紧接在 class="first" 元素后面的 p 元素 */
.first + p {
  color: red;
} 

兄弟选择器的 ~ 符号可选择在指定元素后面的所有同级元素。

/* 选择在 class="first" 元素后面的所有 h3 元素 */
.first ~ h3 {
  color: blue;
} 

值得注意的是，兄弟选择器只能选择同一层级下的元素，并且选择的元素是指后面的元素，而不是前面的元素。

您也可以将兄弟选择器与其他 CSS 选择器一起使用，以选择更具体的元素。

/* 选择紧接在 id="main" 元素后面的 p 元素，并且 class="intro" */
#main + p.intro {
  font-size: 20px;
} 

在编写 CSS 时使用兄弟选择器可以更好地控制样式表的样式和层次性，可以选择更具体的元素，从而更好地指定样式。