CSS选择UL李一{...} VS ul> li>系统{...}(CSS selecto

1. 是什么区别ul > li > a {...}和ul li a {...}在CSS？
2. 哪一个更有效的，为什么？

Answer 1:

“ > ”是子选择

“ “是后代选择

不同的是，后代可以是元素的子元素，或元素的孩子的孩子或孩子的广告inifinitum的孩子的孩子。

子元素仅仅是一个直接包含在父元素中：

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

对于这个例子， foo *将匹配<bar>和<baz> ，而foo > *将只匹配<bar> 。

至于你的第二个问题：

哪一个更有效的，为什么？

我不是真的要回答这个问题，因为它是完全不相干的发展。 CSS渲染引擎是如此之快，有几乎从来没有*理由优化CSS选择超越让他们尽可能的短。

而不必担心微优化，集中精力编写选择，对于手头的情况下才有意义。 我经常使用>选择嵌套样式列表时，因为它区分哪些列表的水平被风格化是很重要的。

_{*如果它真的是在渲染页面的问题，你可能已经得到网页上的元素太多，或太多CSS。 然后，你必须运行一些测试，看看实际的问题是什么。}

Answer 2:

ul>li选择所有li是的直接子ul而ul li选择所有li是（只要你喜欢降深）一内的任何地方ul

对于HTML：

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

和CSS：

li a{ color: green; }
li>a{ color: red; }

的颜色Something将保持绿色，但or Other会红

第2部分，你应该写的规则是适当的情况下，我觉得速度差将是令人难以置信的小，而且很可能通过参与编写更多的代码多余的字符所掩盖，并认为由开发商所花费的时间绝对盖过关于它。

然而，作为一个经验法则，更具体的你和你的规则，更快的CSS引擎可以找到你想要应用到DOM元素，所以我希望li>a快于li a的DOM搜索可以短切更早。 这也意味着，嵌套的锚不与该规则的风格，是你想要的吗？ <~~更相关的问题。

Answer 3:

ul > li > a仅选择直接孩子。 在这种情况下，只有第一级<a>第一电平的<li>内的<ul>将被选择。

ul li a在另一方面将选择所有<a>在ALL -s <li> -s在无序列表

的实施例ul > li

 ul > li.bg { background: red; } 

 <ul> <li class="bg">affected</li> <li class="bg">affected</li> <li> <ol> <li class="bg">NOT affected</li> <li class="bg">NOT affected</li> </ol> </li> </ul> 

如果你使用ul li -所有的的li -s将受到影响

更新的更多效率较低的CSS选择器的顺序去这样的：

• ID，如#header
• 类，如.promo
• 类型，例如div
• 相邻的兄弟，如h2 + p
• 儿童，如li > ul
• 后代，如ul a
• 通用，即*
• 属性，例如[type="text"]
• 伪类/ -elements，如a:hover

所以你更好的选择是使用children选择，而不是只descendant 。 然而常规页面上的差异（不数万元素的经历）可能是完全可以忽略不计。

Answer 4:

1）例如HTML代码：

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

和css规则：

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

“>” - 符号意味着将要搜索唯一的孩子选择器（parentTag> childTag）

所以第一个CSS规则将适用于所有链接（第一和第二）和第二条规则将安良适用于第一个链接

2）对于效率 - 我认为第二个会更快速 - 在案件的JavaScript选择。 此规则从右向左读的，这意味着当规则将被浏览器解析，它让网页上的所有链接： - 在第一种情况下它会发现页面上的每个环节都父元素，并筛选其中存在父标签全部链接“UL “与‘李’ - 在第二种情况下，将检查链路的唯一父节点，如果它是‘里’标签然后 - >检查的父标记‘里’是‘UL’

一些这样的事。 希望我描述了所有正确的你

Answer 5:

回答你的第二个问题 - 性能受到影响 - 如果你正在使用这些选择与单一（没有嵌套）UL：

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

孩子选择ul > li不止高性能ul li ，因为它是更具体的。 浏览器遍历DOM“从右至左”，所以当它发现一个li ，然后它会寻找任何ul为孩子选择的情况下父母，而它具有遍历整个DOM树找到任何ul祖先的后代选择的情况下

文章来源: CSS selectors ul li a {…} vs ul > li > a {…}