Question

我想写一个横向标签列表作为导航器。我在线阅读了一些css文件，并在单个css文件中找到以下（desendant？）选择器样式：

nav ul li a {...}
导航{...}
nav ul li {...}

我知道for 2，nav a表示选择nav类下的所有“a”元素。但是1.和3.呢？ 3.表示选择所有“li”insinde“ul”，“ul”也应该在“nav”里面？在我看来，1和2将具有类似的效果。但我无法在网上找到答案。

Answer 1

第一个意味着它将应用于位于<a>内的<li>内的<ul>内的所有<nav>元素。换句话说，它将设置如下样式的代码：

<nav>
    <ul>
        <li>
            <a>...</a>
        </li>
    </ul>
</nav>

选择器1和选择器2将应用于相同元素的原因是，如果您注意到<nav><ul><li><a>...</a></li></ul></nav>，则<a>都在<nav><ul>...</ul></nav>内。第一个选择器比第二个选择器更具限制性，但因为<ul>内的所有内容总是应该位于<li>元素内，所以选择器应始终适用于相同的元素。

第三个选择器将应用于<li>内<ul>内的<nav>个元素，就像你说的那样。换句话说：

<nav>
    <ul>
        <li>...</li>
    </ul>
</nav>

编辑：正如@Hughes建议的那样，这里要注意的是“特异性”的概念。当存在多个适用于同一对象的规则时，通常需要断开关系。例如，如果我们有这个代码会发生什么？

nav ul a { color: blue; }
nav ul li a { color: green; }

由CSS决定要应用于<nav><ul><li><a> ... </a></li></ul></nav>的字体颜色。在这些情况下，CSS在描述适用的元素时选择更具体的规则。在此示例中，<a>将显示为绿色，因为nav ul li a规则在描述规则应适用的元素时更具体（只需考虑“特定”一词的英文定义）。因此，虽然问题中的选择器1和选择器2应该应用于相同的对象，但如果它们都提供相同的CSS属性，则选择器1中的值将选择为选择器2中的值。

CSS多个后代选择器

1 个答案: