CSS ID和类选择器

Question

这两个CSS选择器意味着什么？

h1#myItemOne h2
{
    background:#0099FF;
    color: #A3F4A3;
}

h1.myItemTwo  h2
{ 
    background:#0099FF;
    color: #A3F4A3;
}

这两个选择器是否可以使用？

Answer 1

第一个匹配h2元素，该元素是h1元素的 child 后代，其id为myItemOne

示例：

<h1 id="myItemOne">
    <h2>Me!</h2>
</h2>

第二个匹配h2元素，该元素是h1元素的子后代，其中类 myItemTwo

示例：

<h1 class="myItemTwo">
    <h2>Me!</h2>
</h2>

它们都有效。主要区别在于id应该是唯一的。班级没有这个要求。

参考：http://www.w3.org/TR/CSS2/selector.html

Answer 2

h1#myItemOne h2 { background:#0099FF; color: #A3F4A3; }

表示任何h2是h1元素的后代，其ID等于“myItemOne”

h1.myItemTwo h2 { background:#0099FF; color: #A3F4A3; }

表示任何h2是h1元素的后代，类等于“myItemOne”

Answer 3

“＃”定义页面中的唯一ID，该点定义了一个可以在多个地方使用的类。

用法：

<h1 id="...."></h1>
<h1 class="...."></h1>