Html 如何仅在下一个元素具有特定类时应用样式？

标记：

---

到目前为止，您无法在CSS中选择上一个元素，您可以通过向类提供一些不同的类来手动确定该类的目标

.divider {
  border-left: 1px solid #d0d0d0;
}
.active {
  background: #fff;
}
// when the next sibling is .active, border-color: transparent;

否则，如果它是

li

您可以使用

ul.class\u name li:first child

，如果不是，只需使用

n（n）

，用

li

的第n个数字替换

n

，这样您就不需要调用类了

比如说

ul.class_name li.target_me {
   /* Styles goes here */
}

上述选择器将选择具有指定类名的

ul

元素的

2nd

子元素

---

还是不满意CSS？您可以选择JS/jQuery解决方案，但如果标记是静态的，我建议您使用

nth

，如果您有权访问标记，您至少可以调用要设置样式的元素上的类

---

注意：您不能嵌套<代码> LI>代码>标签作为一个直接的子到<代码> LI<代码>，请考虑将标记更改到下面的

ul.class_name li:nth-of-type(2) {
   /* Styles here */
}

潜艇

这是一种黑客行为，但这可能对你有用：

div{
颜色：黑色；
浮动：对；
}
.主动+第一{
颜色：粉红色；
}

第三
第二
首先

CSS目前还没有直接的支持，但是jQuery让它变得相对轻松，假设这是您的项目的一个需求，那么这很可能是一个不错的选择

在jQuery中，它的编写方式如下：

<ul>
   <li>
       <a href="#">Home</a>
       <ul>
          <li>Sub</li>
       </ul>
   </li>
</ul>

这里有一个

CSS

if element.next().hasClass('active'){
    element.addClass('divider')

jQuery

.divactive {
  border-left: 1px solid transparent;
}

if element.next().hasClass('active'){
    element.addClass('divider')

.divactive {
  border-left: 1px solid transparent;
}

$(function() {

  $('.active').prev('.divider').addClass('divactive');

  //or

  $('.active').prev('.divider').css({ 'border-left': '1px solid transparent' });

});