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

Question

我看过语法:

ul#nav li a
{
}

我不确定它意味着什么,它是否与说:

#nav ul li a

？

我想我真的不明白在没有空格的id选择器之前有一个元素类型是什么意思...

Answer 1

ul#nav 将适用于 <ul id="nav">

然而:

#nav ul将适用于任何<ul> 内部 <tag id="nav">

Answer 2

ul#nav li a 将选择:

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

它有点多余,因为ID是唯一的.出于所有实际目的,#nav li a将会这样做.

这跟说:是一样的#nav ul li a吗？

请注意,这#nav ul li a是不一样的,如果它是另一个具有id的元素的后代,则会选择其中a的内容.liul nav

<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 {}

这将选择一个<a>元素,id="message"当它被悬停时,只有它有类error,以及类active,它的rel属性是foobar.