Question

我的HTML看起来像这样：

<ul>
  <li class="myItemClass">item foo</li>
  <li class="myItemClass specialItemClass">item foo</li>
  <li class="myItemClass">item foo</li>
  <li class="myItemClass">item foo</li>
  <li class="myItemClass specialItemClass">item foo</li>
  <li class="myItemClass specialItemClass">item foo</li> <!-- problem here -->
  <li class="myItemClass">item foo</li>
  <li class="myItemClass">item foo</li>
</ul>

现在我想为具有'specialItemClass'的项目定义一个css样式，并且它也位于具有'specialItemClass'的项目之后。我怎么能这样做？

进一步说明：'specialItemClass'包括2px彩色边框。但如果两个特殊物品正好在彼此之下，那么边界就会翻倍。所以如果上面[或下面]有另一个特殊项目，我不想在顶部[或底部]添加特殊边框。

Answer 1

使用相邻的兄弟选择器+

.specialItemClass + .specialItemClass{
    /*styles here*/
}

Answer 2

使用adjecent css3选择器来解决您的问题。最好只有特定的选择器。请看小提琴

li.specialItemClass + li.specialItemClass{
  border-top:none;
}

https://jsfiddle.net/0ou3a02u/

如何使用css在另一个块之后定位块？

2 个答案: