css - 是否有连续 sibling 的CSS选择器

标签 css css-selectors

我有一个这样的列表:

<ul>
  <li>Something</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li>Something</li>
  <li>Something</li>
</ul>

前两个有没有CSS选择器<li>在每个 .class1 之后元素?

最佳答案

.class1 + li 将选择第一个后续兄弟。
.class1 + * + li 将选择第二个。

为了保持低特异性,您还可以使用:

.class1 + *,
.class1 + * + * {...}

但前提是 .class1 只会选择适当的 li 元素。


这两个都是脆弱的选择器。脆弱的是,当您稍微更改标记时,它们就会破裂。考虑只添加更多类来定位适当的元素,并保持较低的特异性。

关于css - 是否有连续 sibling 的CSS选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38981045/

相关文章:

html - Foundation hide-for-small 不工作

html - 如何使一个元素在 div 中居中,同时保持它与另一个元素在同一水平面上?

jquery - 如何设置带边框的输入位置:solid transparent

jquery - 悬停菜单时如何更改 .body 的背景颜色(Jquery - Shopify)?

html - 从列表项格式化第二个 child

html - 第一个子元素的CSS选择器

html - CSS3 :not() selector Issue with child elements

javascript - if else javascript中的多个isNaN

css - 如何用纯CSS实现Read more/Read less

css - 使文本不环绕在 :before pseudoelement? 中的图标