40
  1. ul > li > a {...}CSS和CSS有什么区别ul li a {...}？
  2. 哪个更有效，为什么？
4

6 回答 6

59

“ >”是子选择器

“ ”是后代选择器

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

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

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

对于此示例，foo *将匹配<bar>and <baz>，而foo > *仅匹配<bar>.

至于你的第二个问题：

哪个更有效，为什么？

我实际上不会回答这个问题，因为它与开发完全无关。CSS 渲染引擎是如此之快，以至于除了使 CSS 选择器尽可能短之外，几乎没有*优化 CSS 选择器的理由。

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

* 如果在渲染页面时确实存在问题，则可能是页面上的元素过多，或者 CSS 过多。然后你必须运行一些测试来看看实际问题是什么。

于 2012-06-27T13:41:27.103 回答
16

ul>lia 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 aDOM 搜索更早缩短。这也意味着嵌套锚的样式不符合该规则，这是您想要的吗？<~~ 更相关的问题。

于 2012-06-27T13:31:59.917 回答
9

ul > li > a仅选择直接子级。在这种情况下，只会选择里面第一层<a>的第一层。<li><ul>

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

示例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 选择器从高到低的顺序是这样的：

  • 身份证，例如#header
  • 类，例如.promo
  • 类型，例如div
  • 相邻的兄弟姐妹，例如h2 + p
  • 孩子，例如li > ul
  • 后代，例如ul a
  • 通用，即*
  • 属性，例如[type="text"]
  • 伪类/元素，例如a:hover

所以你最好的选择是使用children选择器而不是descendant. 然而，普通页面上的差异（无需经过数万个元素）可能绝对可以忽略不计。

于 2012-06-27T13:32:13.090 回答
1

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 " 和 "li" - 在第二种情况下，如果它是 "li" 标签，它将只检查链接的父节点 -> 检查 "li" 的父标签是否是 "ul"

像这样的东西。希望我为您正确描述所有内容

于 2012-06-27T13:45:02.117 回答
1

在这里> a指定根的颜色li.active.menu-item

#primary-menu > li.active.menu-item > a

#primary-menu>li.active.menu-item>a {
  color: #c19b66;
}
<ul id="primary-menu">
  <li class="active menu-item"><a>Coffee</a>
    <ul id="sub-menu">
      <li class="active menu-item"><a>aaa</a></li>
      <li class="menu-item"><a>bbb</a></li>
      <li class="menu-item"><a>ccc</a></li>
    </ul>
  </li>

  <li class="menu-item"><a>Tea</a></li>
  <li class="menu-item"><a>Coca Cola</a></li>
</ul>

于 2019-07-02T09:38:52.707 回答
0

回答您的第二个问题-性能受到影响-如果您将这些选择器与单个（无嵌套）ul 一起使用：

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

子选择器ul > li比ul li因为它更具体而更高效。浏览器“从右到左”遍历 dom，因此当它找到 a 时，li它会在子选择器的情况下查找 anyul作为父级，而ul在后代选择器

于 2012-06-27T13:44:28.417 回答