CSS ID 和类选择器答案

【问题标题】：CSS ID and Class SelectorsCSS ID 和类选择器
【发布时间】：2010-11-02 20:26:00
【问题描述】：

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

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

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

这两个选择器有效吗？

【问题讨论】：

【解决方案1】：

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

例子：

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

第二个匹配 h2 元素，它是具有 class myItemTwo

的 h1 元素的 ~~child~~ 后代

例子：

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

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

【讨论】：

你说的“孩子”我相信你的意思是“后代”。 h2 不需要是任一选择器中的直接子级。如果您确实想要直接孩子，请使用“h1.myItemTwo > h2”之类的内容。
很好地补充了孩子和后代劳伦斯的区别。补充一下，我认为 IE6 及以下版本不支持子选择器 >，可能还有其他一些较旧的浏览器。

【解决方案2】：

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

表示作为 ID 等于“myItemOne”的 h1 元素的后代的任何 h2

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

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

【讨论】：

【解决方案3】：

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

用法：

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

【讨论】：