Question

我正在寻找一种方法，以不同的方式将一些CSS应用于元素，具体取决于后面的内容。例如，使用此HTML：

<ul>
  <li>
    <span class="title">Some Title</span>
    <span class="subtitle">With Some Subtitle</span>
  </li>
  <li>
    <span class="title">Only a Title</span>
  </li>
</ul>

我想对.title应用不同的规则，具体取决于是否有.subtitle。

我能找到的最近的是相邻的兄弟选择器

.title + .subtitle { /* rules */ }

但是，这会将规则应用于以.subtitle开头的.title元素。相反，我希望规则适用于.title元素后面带有.subtitle元素。

注意：对于我目前的使用情况，浏览器广泛支持这一点并不重要。我唯一重要的目标是基于webkit。

Answer 1

CSS3 spec中没有“老”兄弟姐妹的兄弟组合。

在这种情况下，您可以使用:only-child。

li > span.title:only-child { /* rules */ }

Answer 2

我认为这需要在布局引擎中进行回溯，因此无法使用。你可以在jQuery中做到这一点而不是简单地说：

$('span.title + span.subtitle').prev().addClass('cssClass')

CSS选择器，用于在另一个元素之前将规则应用于元素

2 个答案: