当我尝试使用通用兄弟组合器对无序列表中的项目进行颜色列表时,没有任何反应:
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>
&#13;
但段落中的span
颜色完全没有问题:
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
样式,列表项也将继承该样式。
答案 0 :(得分:4)
在您的第一个示例(h1 ~ li
)中,您要说:
找到兄弟姐妹和的任何li
>前面加上 a h1
。由于li
属于ul
,因此该规则不匹配。
您要说的第二个示例(h1 ~ p span
):
找到孩子的任何span
{{1这是一个兄弟,前面是一个p
。所以规则是匹配的。
要获得匹配的第一条规则,请改为使用h1
。这有效地说:
找到孩子 h1 ~ ul li
的任何li
兄弟和< strong>前面加上 a ul
。
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
li:first-child {color:green;}
&#13;
p {
color: blue
}
li:first-child {
color:green;
}
h1 ~ ul li {
color: red;
}
&#13;
答案 1 :(得分:0)
首先,正如Joshua K所说,number
是与<h1>
相同的兄弟(意思是在同一个dom级别)。如上所述,您可以像这样访问兄弟姐妹的孩子
<ul>
我不知道是否有完整的继承指南,但您可以阅读CSS选择器here,从而了解dom继承和元素关系。
至于你的最后一个问题,h1 ~ ul > li
中没有标题。在您的示例中,<ul>
只是纯文本。你可以用两种方式设计它。
1)(坏方法)为整个"My list"
设置样式,并覆盖<ul>
元素中的属性。
2)将你的标题包裹在一个元素周围,例如<li>
并在<span>My List</span>