Css序列选择器中间有其他标签

在CSS中，序列选择器是比较灵活和强大的一种选择器。然而，在序列选择器中间添加其他标签，却是一个容易引起混淆的问题。

比如，我们想要选中这样的一个元素结构：

ul>
      li>
    第一项/li>
      br>
      li>
    第二项/li>
    /ul>

我们可以使用这样的CSS：

ul li {
      color: red;
}
    

这样，所有ul> 中的li> 都会被选择，并设置为红色字体。但是，如果我们想让br> 标签也生效，应该怎么做呢？

可以使用这样的CSS：

ul br + li {
      color: red;
}
    

这个选择器的意思是：选择紧接着br> 标签后的li> 元素，并将其设置为红色字体。所以，只有第二个li> 元素会被选择。

值得注意的是，序列选择器中间的其他标签必须满足“兄弟选择器”的要求，也就是说，这些标签必须是紧挨着的。

除了兄弟选择器，我们还可以使用其他选择器来选择序列选择器中间的其他标签。比如，我们可以使用后代选择器：

ul li span {
      color: red;
}
    

这样，只有第一个li> 元素中的span> 标签会被选择，并设置为红色字体。

总之，在使用序列选择器时，要注意中间的其他标签，只有理解其兄弟关系，才能写出正确的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！