Question

当我尝试使用通用兄弟组合器对无序列表中的项目进行颜色列表时，没有任何反应：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

http://jsfiddle.net/93khsvbn/

＆＃13;

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

＆＃13;

<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>

＆＃13;

Sooo ... span与继承的段落平等，即使它嵌套在段落内？为什么？我似乎找不到可以从中学习继承的全面资料来源。

另外，就像旁边一样......如何在不设置列表项的样式的情况下设置无序列表的标题？我是否必须为ul分配标识符？如果我设置ul样式，列表项也将继承该样式。

Answer 1

在您的第一个示例（h1 ~ li）中，您要说：
找到兄弟姐妹和的任何li >前面加上 a h1。由于li属于ul，因此该规则不匹配。

您要说的第二个示例（h1 ~ p span）：
找到孩子的任何span {{1这是一个兄弟，前面是一个p。所以规则是匹配的。

要获得匹配的第一条规则，请改为使用h1。这有效地说：
找到孩子 h1 ~ ul li的任何li 兄弟和< strong>前面加上 a ul。

＆＃13;

h1

＆＃13;

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

＆＃13;

还应该注意的是文本＆＃34;我的列表＆＃34;在<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
将其移到列表之外：<li class="heading">My List</li>
使用<h2>My List</h2><ul>选择器：first-child

＆＃13;

li:first-child {color:green;}

＆＃13;

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

＆＃13;

Answer 2

首先，正如Joshua K所说，number是与<h1>相同的兄弟（意思是在同一个dom级别）。如上所述，您可以像这样访问兄弟姐妹的孩子

<ul>

我不知道是否有完整的继承指南，但您可以阅读CSS选择器here，从而了解dom继承和元素关系。

至于你的最后一个问题，h1 ~ ul > li中没有标题。在您的示例中，<ul>只是纯文本。你可以用两种方式设计它。

1）（坏方法）为整个"My list"设置样式，并覆盖<ul>元素中的属性。

2）将你的标题包裹在一个元素周围，例如<li>并在<span>My List</span>

中应用样式

在使用普通兄弟组合器时感到困惑＆＃34;〜＆＃34;（代字号）

2 个答案: