我需要知道有什么不同

Question

我一直在为导航栏的无序列表项做 CSS（.nav ul li a）。但是大约几天前，我正在尝试一些东西，看看是否有任何变化。我刚刚使用（a）并将其边框更改为无，边框底部更改为纯 1px 青色，它可以工作。 (.nav ul li a) 和 (a) 在做 CSS 时有什么区别吗？示例如下：

nav{ color: cyan; border-radius: 5px; }
li{ list-style-type: none; }

对

nav li{ list-style-type: none; }

Answer 1

差别很大。

css 选择器引擎将仅在选择器查询的层次结构内的 acnhor 标记上使用和应用规则，即 NAV UL LI A。只需将应用规则放在 li 标记内的锚标记上，该标记位于导航标记内的 ul 标记内。不碰其他任何东西

nav ul li a {
color: red;
}

<a href='#'>outside of nav</a>

<nav>
<ul>
<li><a href='#'>inside of nav</a></li>
<li><a href='#'>inside of nav</a></li>
</ul>
</nav>

<a href='#'>outside of nav</a>

另一个视角，例如清酒

nav ul li a {
color: red;
}

<a href='#'>outside of nav</a>

<nav>
<ul>
<li><a href='#'>inside of nav ul li</a></li>
<li><a href='#'>inside of nav ul li</a></li>
<a href='#'>outside of li tag becuase it doesnot match 'nav ul li a' rule becuase selector goes on to dig deep into li tag since anchor tag is outside it discards it all together </a>
</ul>
</nav>

<a href='#'>outside of nav</a>

但是我们只使用 A 作为选择器查询它并不关心 A 在哪里它只是将它应用于它可以在整个文档中找到的每个单个 acnhor 标记。 'nav ul a' 的情况也是如此，它不会关心 a 是在 li 内还是在外部，它会将其应用于在 nav ul 标签中找到的每个 a 标签。 'nav a' 任何和每个带有 in nav 标签的锚标签也是如此。因此，实际上“a”仅表示整个文档中的每个锚标记。

a {
color: red;
}

<a href='#'>outside of nav</a>

<nav>
<ul>
<li><a href='#'>inside of nav</a></li>
<li><a href='#'>inside of nav</a></li>
</ul>
</nav>

<a href='#'>outside of nav</a>

我会进一步建议你阅读一下 CSS 选择器引擎的工作原理。

Answer 2

如果您为 nav ul li a 添加 css 属性，则 css 属性将仅适用于导航栏中的锚标记。如果您在导航栏之外有任何锚标记，则 css 属性将不适用于它。如果您只是为锚标记提供 css，则该属性将适用于 html 中存在的所有锚标记。

nav ul li a {
color: red;
}

<a href='#'>outside of nav</a>

<nav>
<ul>
<li><a href='#'>inside of nav ul li</a></li>
<li><a href='#'>inside of nav ul li</a></li>
<a href='#'>outside of li tag becuase it doesnot match 'nav ul li a' rule becuase selector goes on to dig deep into li tag since anchor tag is outside it discards it all together </a>
</ul>
</nav>

<a href='#'>outside of nav</a>