标题可能令人困惑。我的论文中有一个问题说:
编写将应用以下CSS规则的HTML片段:
li > .ext {
color: blue; }
我的答案如下:
<div class="ext">
<ul>
<li> This is a list item </li>
</ul>
</div>
但后来我觉得它可能就像:
<div >
<ul class="ext">
<li> This is a list item </li>
</ul>
</div>
由于李是ul的直接后裔。但这些都没有奏效。任何人都可以解释错误吗? 在此先感谢:)
答案 0 :(得分:2)
编写将应用以下CSS规则的HTML片段:
li > .ext {
color: blue; }
这将是这样的:
<ul>
<li> <span class="ext">This is a list item</span> </li>
</ul>
选择器的结构需要一个元素一个.ext
的元素,它是{{>>直接子元素(>
)的{{ 1}}。
答案 1 :(得分:0)
我认为你误解了直系后裔的意思。
li > .ext
意味着找到一个级别为down的子元素,它具有一个'.ext'类。
直接后裔只会向下看一级。
<ul>
<li>This is a list item
<p class="ext">This is what will be selected</p>
</li>
</ul>
答案 2 :(得分:-1)
我觉得它不起作用的原因是因为存在比你更强大的css选择器,意味着现有的css选择器优先。
为你写了一个例子,这是怎么回事: http://codepen.io/tusharbhatta/pen/dpqwAj 这里有一个特殊的顶级div类'bug'优先于你的代码:
.bug ul li > span {
color: red;
}
我建议启用调试模式并选择li html并查看浏览器正在执行哪个选择器。那会给你一些线索。