仅当下一个元素具有特定类时如何应用样式？答案

【问题标题】：How to apply the style only if next element has specific class?仅当下一个元素具有特定类时如何应用样式？
【发布时间】：2022-04-22 01:43:17
【问题描述】：

标记：

<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>

如果.active 是下一个兄弟，我如何在第一个.divider 添加样式？

我在考虑.divider + .active，但这会将样式应用于.active。

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

<li class="divider target_me"></li>

而不仅仅是使用

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

否则，如果它是li 的第一个孩子

你可以使用ul.class_name li:first-child，如果不是，只需使用nth-of-type(n)，将n替换为li的第n个数字，这样你就不需要调用类了。

例如

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

上述选择器将选择具有指定类名的ul 元素的2nd 子元素。

仍然对 CSS 不满意？您可以选择 JS/jQuery 解决方案，但如果标记是静态的，我建议您使用 nth，如果您可以访问标记，您至少可以在要设置样式的元素上调用类。..

注意：您不能将 li 标记作为直接子级嵌套到 li，请考虑将您的标记更改为以下 ..

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

【讨论】：

【解决方案2】：

这可以为你工作：

div {
    color: black;
    float: right;
}

.active + div {
    color: pink;
}

<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>

Fiddle

【讨论】：

【解决方案3】：

到目前为止，CSS 还没有对此提供直接支持，但 jQuery 使其相对轻松，并且假设这是您的项目的要求，很可能是要走的路。

在 jQuery 中会这样写：

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

【讨论】：

【解决方案4】：

这是Fiddle

CSS

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

jQuery

$(function() {

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

  //or

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

});

【讨论】：