css - 使用通用兄弟组合器时对继承感到困惑 "~"(代字号)

Question

因此，当我尝试使用通用兄弟组合器为无序列表中的列表项着色时，什么也没有发生:

http://jsfiddle.net/bkbehpv0/

p {
  color: blue
}
h1 ~ li {
  color: red;
}

<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy </p>
<ul>My list
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

但是段落中的 span 颜色完全没有问题:

http://jsfiddle.net/93khsvbn/

p {
  color: blue
}
h1 ~ p span {
  color: red;
}

<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy <span> heyo </span></p>
<ul>My list
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Sooo...即使 span 嵌套在段落内部，在继承方面是否与段落处于同等地位？为什么？我似乎找不到可以从中了解继承的完整资源。

此外，顺便说一句...如何在不对列表项设置样式的情况下设置无序列表标题的样式？我是否必须为 ul 分配标识符？如果我为 ul 设置样式，列表项也将继承该样式。

Answer 1

在您的第一个示例 ( h1 ~ li ) 中，您说的是:
找到任何 li这是 sibling 并且之前一个h1 .作为li属于一个ul此规则不匹配。

第二个例子 ( h1 ~ p span ) 你说的是:
找到任何 span child p这是一个兄弟并且之前一个h1 .所以规则是匹配的。

要获得匹配的第一条规则，您应该改为使用 h1 ~ ul li .这实际上是说:
找到任何 li child ul这是一个兄弟并且之前一个h1 .

p {
  color: blue
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

还应注意，文本“我的列表”在 ul 中无效。 , 它应该被 li 包围标签。区别于其他li你可以:

• 添加类(class):<li class="heading">My List</li>
• 将其移出列表:<h2>My List</h2><ul>
• 使用first-child选择器:li:first-child {color:green;}

p {
  color: blue
}
li:first-child {
  color:green;
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>My List</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>