div #someid vs #someid？

Question

使用

有什么区别

#mb > a 

VS

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只会选择#mb如果是div（例如，如果#mb是span，则不会选择它）。此外，它更具体。例如，div#mb将覆盖#mb，如果样式已应用于其他地方。如果#mb只作为div存在一次，并且您没有覆盖任何现有的样式，则没有必要。

Answer 2

div#mb更具体，仅针对身份div的{​​{1}}。
mb不太具体，定位#mb元素，其ID为any。 第一条规则更好，因为您可以覆盖较弱的规则，并且它需要更高的优先级。

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

以下两个是一些代码示例，演示了所选的内容，假设每个元素都在一个单独的html文件中（因此没有相同的ID冲突）。

nav

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

Answer 3

#mb > a将定位任何锚元素，该元素是ID为mb的任何元素的直接子元素。

div#mb > a将定位任何锚元素，该元素是ID为mb

的任何 div 元素的直接子元素

但是，因为id必须是唯一的，#mb与div#mb相同，所以这里没有区别。

Answer 4

div#mb > a指定id mb必须是div的id，而#mb > a指定id mb可以属于任何元素。

你得到的更具体的，css规则更强大，能够覆盖更弱的规则。