使用类选择器为子<li>设置样式

Question

标题可能令人困惑。我的论文中有一个问题说：

编写将应用以下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的直接后裔。但这些都没有奏效。任何人都可以解释错误吗？ 在此先感谢：）

Answer 1

  

编写将应用以下CSS规则的HTML片段：

li > .ext {

 color: blue; }  

这将是这样的：

<ul>
    <li> <span class="ext">This is a list item</span> </li>
 </ul>

选择器的结构需要一个元素一个.ext的元素，它是{{>>直接子元素（>）的{{ 1}}。

30 CSS Selectors You Should Memorise

Answer 2

我认为你误解了直系后裔的意思。

li > .ext 

意味着找到一个级别为down的子元素，它具有一个'.ext'类。

直接后裔只会向下看一级。

<ul>
    <li>This is a list item
        <p class="ext">This is what will be selected</p>
    </li>
</ul>

Answer 3

我觉得它不起作用的原因是因为存在比你更强大的css选择器，意味着现有的css选择器优先。

为你写了一个例子，这是怎么回事： http://codepen.io/tusharbhatta/pen/dpqwAj 这里有一个特殊的顶级div类'bug'优先于你的代码：

.bug ul li > span {
  color: red;
}

我建议启用调试模式并选择li html并查看浏览器正在执行哪个选择器。那会给你一些线索。