一个列表中的第一个孩子和一个列表
一个列表中的第一个孩子和一个列表
提问于 2018-05-22 21:39:58
我试图在父母列表中列出第一个孩子的样式：
ol:first-child > li {
color: red;
}<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/1/
而不是子目录。但是，如果在启动子列表之前关闭第二个列表项，它就会工作。
<li>Numbered list item 2</li>
<ol>...如下所示：
ol:first-child > li {
color: red;
}<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2</li>
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
<li>Numbered list item 3</li>
</ol>
https://jsfiddle.net/cvuw2bd1/
不幸的是，我不能只更改HTML的CSS。是否有一种方法可以避免在第一个示例中将子列表排除在外。(我不能添加任何类或ids。)
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-22 21:50:21
您所针对的ol是ol:first-child > li结构中的第一个、最后一个和唯一的子结构。它没有兄弟姐妹。嵌套的ol也是如此。
ol元素具有垂直关系(祖先-后代)，而不是横向关系(兄弟关系)。
li {
color: red;
}
li li {
color: black;
}<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
此外，在处理color属性时，熟悉继承的概念非常重要。以下是一个解释：
Stack Overflow用户
发布于 2018-05-23 10:59:24
如果不能更改html，则可以将样式应用于li的子元素。
ol:first-child > li {
color: red;
}
li li{
color:black !important;
}<ol>
<li>Numbered list item 1</li>
<li>Numbered list item 2
<ol>
<li>sublist item 1</li>
<li>sublist item 2</li>
</ol>
</li>
<li>Numbered list item 3</li>
</ol>
最后但不是最不重要的..。如果不能工作，请使用important
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50476834
复制相关文章
相似问题
腾讯云开发者
