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

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前面带有a 的元素.title.相反,我希望规则适用于.title带有.subtitle元素的元素.

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

Answer 1

CSS3规范中没有"老"兄弟姐妹的兄弟组合.

在这种情况下,您可能会逃脱:only-child.

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