ul#menu vs #menu？

Question

HTML:

<ul id="menu">
    <li><a href="" class="active">Portfolio</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Testimonials</a></li>
    <li><a href="">Request a Quote</a></li>
</ul>

CSS:

ul#menu li {
    display:inline;
    margin-left:12px;
}

使用" ul#menu li"和"只是" 之间有区别#menu li吗？我使用了两个版本,他们似乎完成了同样的事情.有没有理由为什么大多数教程使用在id之前添加"ul"？

Answer 1

有一个明显的区别和一个微妙的区别.

明显的区别在于,#menu所有具有ID的元素都定位#menu,而ul#menu只定位ul元素.如果只将ID提供#menu给ul元素,则选择器将始终具有相同的结果.

特殊情况存在一个潜在的差异.这是一种确定在发生冲突时使用哪个规则的方法.所以如果你有这两个规则:

#menu li {color: blue;}
ul#menu li {color: red;}

第二条规则将获胜,因为它更具体,文本将为红色.特异性的规则是复杂的,并不总是直观的,但在这种情况下,简单的结果ul#menu li是稍微更具体#menu li.如果您只有一个样式表,这对您来说不太可能是个问题.如果你有几个样式表,可能会弄清楚为什么忽略某个规则; 特异性往往是答案.

至于大多数教程使用的原因ul#menu,我不知道.(事实上​​,我只有你的断言作为他们所做的证据!)我的猜测是他们为了愚蠢的读者而做的事情非常明显.