CSS选择器ul li a{…}vs ul>；李>；a{…} CSS中的ul>li>a{…}和ulli a{…}之间有什么区别 哪一个更有效？为什么

ul>li

选择属于

ul

的直接子级的所有

li

，而

ul-li

选择

ul

中任意位置的所有

li

对于HTML：

<ul>
  <li><span><a href='#'>Something</a></span></li>
  <li><a href='#'>or Other</a></li>
</ul>

某物

的颜色将保持为绿色，但

或其他

的颜色将为红色

第2部分，您应该编写适合这种情况的规则，我认为速度差异会非常小，可能会被编写更多代码所涉及的额外字符所掩盖，并且肯定会被开发人员思考时间所掩盖

---

但是，根据经验，规则越具体，CSS引擎就越快找到要应用它的DOM元素，因此我预计

li>a

比

li a

快，因为DOM搜索可以提前缩短。这也意味着嵌套锚不使用该规则设置样式，这是您想要的吗

ul>li>a

仅选择直接子级。在这种情况下，将仅选择

内第一级

的第一级

另一方面，ul li a将在无序列表中的所有

-s中选择所有

-s

ul>li的示例


ul>li.bg{
背景：红色；
}

受影响
受影响的

不受影响
不受影响

“
”是

“
”是

不同之处在于，后代可以是元素的子元素，也可以是元素的子元素的子元素，也可以是非终结子元素的子元素

子元素只是直接包含在父元素中的元素：

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>



对于本例，
foo*
将匹配
和
，而
foo>*
将只匹配

关于你的第二个问题：

哪一个更有效？为什么

我不打算回答这个问题，因为它与开发完全无关。CSS呈现引擎速度如此之快，以至于除了尽可能地缩短CSS选择器之外，几乎没有任何理由对其进行优化

与其担心微观优化，不如专注于编写对当前案例有意义的选择器。在设置嵌套列表的样式时，我经常使用
选择器，因为区分列表的哪个级别正在设置样式很重要

*如果在呈现页面时确实存在问题，则可能是页面上的元素太多，或者CSS太多。然后，您必须运行一些测试，看看实际问题是什么。
要回答第二个问题-性能受到影响-如果您将这些选择器与单个（无嵌套）ul一起使用：


jjj
jjj
jjj


子选择器
ul>li
比
ul-li
性能更好，因为它更具体。浏览器“从右到左”遍历dom，因此当它找到
li
时，如果是子选择器，它将查找any
ul
作为父级，而如果是子选择器，它必须遍历整个dom树以查找any
ul
祖先（例如HTML代码：

<ul>
    <li>
        <a href="#">firstlink</a>
        <span><a href="#">second link&lt;/a>
    </li>
</ul>

“>”-符号表示将只搜索子选择器（parentTag>childTag）

所以第一个css规则将应用于所有链接（第一个和第二个）
第二条规则将适用于第一个链接

2） 至于效率——我认为第二个会更快——就像JavaScript选择器一样。此规则从右向左读取，这意味着当规则通过浏览器进行解析时，它将获得页面上的所有链接：
-在第一种情况下，它将查找页面上每个链接的所有父元素，并过滤存在父标记“ul”和“li”的所有链接
-在第二种情况下，它将只检查链接的父节点，如果它是“li”标记，那么->检查“li”的父标记是否是“ul”

像这样的东西。
希望我能在这里为您正确地描述a

以指定

li.active.菜单项的根的颜色

#主菜单>li.active.menu-item>a


#主菜单>li.active.menu item>a{
颜色：#c19b66；
}

咖啡

aaa
bbb
ccc


茶
可口可乐
我假设其中一个是不同的？我修正了它..那是一个打字错误。这回答了问题的第一部分，第二部分呢？这是一个糟糕的例子<代码>

元素不能是

元素的子元素。隐含的效率问题是有意义的：给定

，在

ul>a

和

ul-li a

中，哪个选择器更快？然而，我完全同意ZZBOV对效率问题的回答。我只是尝试了代码，“未受影响”的部分实际上是用“ul>li”选择的，原因有两个。1） 内部

是
• 元素。2） 内部列表也是“ul>li”类型。如果内部列表是“ol”而不是“ul”，并且它放在一个div中，而不是作为
• -element.erg打字错误，则该示例有效-相反，因为子选择器更具体-很好地识别现在更新答案我认为你错了……按照ul>li上面的答案应该比ul li更有效，因为

  <ul>
      <li>jjj</li>
      <li>jjj</li>    
      <li>jjj</li>
  </ul>
  

  <ul>
      <li>
          <a href="#">firstlink</a>
          <span><a href="#">second link&lt;/a>
      </li>
  </ul>
  

  1) ul li a {color:red;} 
  2) ul > li > a {color:blue;}