这个CSS选择器语法是什么意思？

Question

我见过这个语法：

ul#nav li a
{
}

我不是很确定它的意思，它是否和说“是同义词”一样：

#nav ul li a

我想我不太明白在没有空格的情况下，在ID选择器前面具有元素类型是什么意思...

- Exitos

Answer 1

将应用于

而：

#nav ul将应用于任何在内部的

- JMax

---

#nav ul 不会应用于每个 <ul>，它将应用于任何 <tag id="nav"> 中的每个 <ul>。 - Kokos

Answer 2

ul#nav li a会选择：

• 在<li>元素内部的<a>元素...
• 在带有id属性为nav的<ul>中的<li>元素内部的<a>元素...

它不会选择任何不是<ul>元素的后代，即使它的id是nav。

这有点冗余，因为id是唯一的。实际上，#nav li a也可以达到同样的效果。

---

这和说：#nav ul li a是一样的吗？

请注意，#nav ul li a并不相同，这将选择具有id为nav的另一个元素的后代ul内部的li中的a。

<div id="nav">
  <ul>
    <li><a>This would be selected</a></li>
  </ul>
<div>

<ul id="nav">
  <li><a>This would not be selected</a></li>
</ul>

我想我并不真正理解在没有空格的情况下，在id选择器之前具有元素类型意味着什么......

您可以在一个元素上组合多个选择器。这是一个愚蠢的例子：

a#message.error.active[rel="foobar"]:hover {}

当鼠标悬停在具有class为"error"和"class"为"active"的id为"message"且其"rel"属性为"foobar"的元素上时，将选择该元素。基础知识解释可以在此处找到：http://www.w3.org/TR/CSS2/selector.html。

- Wesley Murch

---

+1 表示多余，因为 #id 应该是唯一的。 - JMax

“supposed to be”是关键 - 我看到这里有很多人不知道这一点。 - Wesley Murch

Answer 3

这个选择器选中了一个无序列表内部的列表项中，ID为“nav”的锚点。

因此，

<ul id='nav'>
    <li>
        <a href='test.com'>Test</a>
    </li>
<ul>
<ul>
    <li>
        <a href='test.com'>Test</a>
    </li>
<ul>

它将匹配第一个锚点，而不是第二个。

如果它能够工作，它也不同于第二个，它只会匹配 UL 元素的父元素具有 ID 为“nav”的情况。

- Russ Clarke

Answer 4

值得注意的是，虽然tag#id_name语法是多余的，因为id是唯一的，但在处理类时，该语法非常有用。 ul.nav li { }可用于区分相同类别的多个标签。

像这样：

  <ul class="nav">
    <li>Stuff</li>
  </ul>
  <ol class="nav">
    <li>First Item</li>
  </ol>

ul.nav li { } 会影响 "Stuff"，而 ol.nav li { } 会影响 "First Item"。

- Jared Neil

---

tag#id_name 的确也有使用情况，但它们相当罕见，通常可以避免使用。我很高兴你指出了这在类中的用处。另外：欢迎来到本站！不错的第一篇帖子。 - Wesley Murch