[分享]css匹配前一个元素

在CSS中，可以使用“+”符号来选择前一个元素，并使其匹配指定的样式。这种选择器被称为“紧随选择器”。p + div { color: red; } 以上代码表示选择紧随在段落元素之后的div元素，并...

在CSS中，可以使用“+”符号来选择前一个元素，并使其匹配指定的样式。这种选择器被称为“紧随选择器”。

p + div {
  color: red;
} 

以上代码表示选择紧随在段落元素之后的div元素，并将其文本颜色设置为红色。

这种选择器常用于为某个元素添加特殊的样式，例如对于一个表格中的每一行，可以选择第一个单元格并设置它的背景色。

tr td:first-child {
  background-color: #ccc;
} 

以上代码表示选择每一行的第一个单元格，并将其背景色设置为灰色。

这种选择器也可以与其它选择器一起使用，例如可以选择body元素中第一个段落元素之后的span元素，并将其文本颜色设置为蓝色。

body p:first-of-type + span {
  color: blue;
} 

以上代码表示选择body中第一个段落元素之后的span元素，并将其文本颜色设置为蓝色。

总的来说，“紧随选择器”在CSS中具有重要的作用，在实际开发中，我们可以根据具体的需求灵活使用。