Question

使用生成以下内容的CMS：

<ul class="list-unstyled">
 <li>content 1</li>
 <li>content 2</li>
</ul>
<ul class="list-unstyled">
 <li>
  <span>content 3</span>
 </li>
 <li>
  <h2>content 4</h2>
 </li>
</ul>

我想选择“内容4”。有许多<ul>个标签，其中包含“list-unstyled”类。有没有办法选择.list-unstyled > li > h2 li有兄弟li > span

这是必须的，所以我不要只选择内容4.有可能在另一个地方有.list-unstyled > li > h2但没有兄弟li > span

希望我清楚明白

Answer 1

有没有办法选择.list-unstyled > li > h2李有兄弟li > span

不，因为出于兄弟关系的目的，您无法在选择器中表达li个span子项。见Is there a CSS parent selector?

看看你是否可以某种方式改变CMS的输出，为你的元素生成必要的类。

Answer 2

你的意思是

ul > li + li > h2{color:green}

<ul class="list-unstyled">
 <li>content 1</li>
 <li>content 2</li>
</ul>
<ul class="list-unstyled">
 <li>
  <span>content 3</span>
 </li>
 <li>
  <h2>content 4</h2>
 </li>
</ul>

基本上CSS无法向上看。

您可能希望查看javascript和dom元素属性，以获得基于条件测试的更加自定义的方法; 但也许更改标记更容易：）

具有特定兄弟的css选择器

2 个答案: