Question

之间有什么区别

tag.class和tag .class

或

tag#id和tag #id？

Answer 1

tag.class将名为tag 和的所有元素与类class匹配，例如：

div.foo { color: red; }匹配<div class="foo">

tag .class匹配.class元素后代的所有tag元素（请注意tag和.class之间的空格）：

div .foo { color: red; }与<span>
中的<div><p><span class="foo">相匹配

tag#id和tag #id与上述内容类似，但id属性上的匹配除了class属性[1]

div#foo { color: red; }匹配<div id="foo">

div #foo { color: red; }与<span>
中的<div><p><span id="foo">相匹配

请记住，因为id=""属性是唯一的，因此额外的选择器可能是多余的，例如div#bar可以简化为#bar（除非您在#bar可能包含不同元素标记名称的不同网页上重复使用相同的CSS规则）。

[1]：在HTML中也是如此，在使用CSS的其他SGML和XML语言中，.class和#id选择器可以映射到其他属性名称。

Answer 2

tag.class表示tag class='class'。像这样：

<!-- This tag would be selected -->
<tag class="class">
    ...
</tag>

tag .class表示class='class'的元素，是<tag>的后代。像这样：

<tag>
    ...
        <!-- This div would be selected -->
        <div class="class">
        </div>
    ...
</tag>

通常，类似selector1 selector2的内容意味着匹配selector2的元素，并且是与selector1匹配的元素的后代。考虑这个例子：

<强> CSS：

/*
   div.face matches a div with class="face"
   div.eye#left matches a div with class="eye" and id="left"

   Hence, this would select an element with class="eye" and id="left" which is
   inside a div with class="face"
*/

div.face div.eye#left {
}

<强> HTML：

<div class="face">  <!-- div.face -->

  <div class="upper">

    <div class="eye" id="left"></div> <!-- div.eye#left is selected -->
    <div class="eye" id="right"></div>

  </div>
</div>

Answer 3

空格（）是后代选择器，请参阅文档：http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

长篇短篇tag.class适用于tag元素类class，而tag .class适用于class的任何元素在tag元素内的类。

tag.class和tag .class之间的区别是什么？

3 个答案: