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>元素......
这是<li>元素......
属于<ul>且id属性等于nav。

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

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

是否与说#nav ul li a？
相同

请注意，#nav ul li a不一样，如果a 的后代li ，这会选择ul中的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>的元素。

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

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

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

<a>

这会在id="message"元素悬停时选择error元素，只有当它具有类active以及类rel时，它才会{ {1}}属性为foobar。

这里解释了基础知识：http://www.w3.org/TR/CSS2/selector.html

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>

它会与第一个Anchor匹配，而不是第二个。

它与第二个不同，如果它完全有用，它只匹配UL的父母ID为'nav'的地方。

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 { }会影响“第一项。”

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

4 个答案: