html - div#someid vs only #someid？

Question

使用上有什么区别

#mb > a 

对比

div#mb > a 

在下面的代码中？似乎产生了相同的结果。

    <style>
    #mb > a {
    background:#333;
    padding:10px 20px;
    color:#999;
    margin-right:10px;
    text-decoration:none;
    </style>


<div id="mb">
    <a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a>
</div>

http://jsfiddle.net/58mkz/ --没有div引用

http://jsfiddle.net/aZrPy/ --带div引用

Answer 1

div#mb 更具体，仅针对具有 id mb 的 div。
#mb 不太具体，它针对具有 id mb 的 任何 元素。第一条规则更好，因为您可以覆盖较弱的规则并且它具有更高的优先级。

它产生相同的结果，因为只有一个元素的 ID 为 mb，它也是一个 div。在 One 中查看差异和 Two使用 nav 元素。

下面两个是一些代码示例，演示了选择的内容，假设每个元素都在一个单独的 html 文件中(因此没有相同的 id 冲突)。

div#mb:

<div id="mb"></div> <!--Selected-->

<span id="mb"></span> <!--Not Selected-->

<div id="something"></div> <!--Not Selected-->

#mb:

<div id="mb"></div> <!--Selected-->

<span id="mb"></span> <!--Selected-->

<div id="something"></div> <!--Not Selected-->

<p id="something"></p>

这同样适用于 div#mb > a 和 #mb > a:

div#mb > a:

<div id="mb">
     <a></a> selected
     <div>
        <a></a> not selected - not direct child
     </div>
</div>

<div id="mbtwo">
     <a></a> not selected
</div>