Question

我正在阅读the book: CSS Mastery: Advanced Web Standards Solutions，并且发现里面的css代码几乎是以这种格式写的：

elementName#idName   
elementName.className

但是，我以前用这种格式写代码忽略元素名称：

 #idName   
.className

所以，我想弄清楚这两种格式之间有什么区别。

实际上，我知道什么时候应该使用type.class。而且，我只是想知道当我在这里只使用一种标签时使用.class的type.class insead时的影响。

必须对性能产生一些影响。

Answer 1

两者的区别在于第一个：

       element.class

调用具有该特定类的元素。

第二个：

        .class

调用包含此类的所有元素

Answer 2

这是一个真实的场景，就像何时使用elementName以及何时使用class或id名称一样：

HTML：

<a class="blue">I'm blue and underline</a>
<span class"blue">I'm blue and bold</a>

CSS：

.blue {
   color:blue //will make both <a> and <span> blue
}

a.blue {
   text-decoration:underline // will make only the <a> tags underline
}
span.blue {
   font-weight:bold //will make only the <span> tags bold
}

但请记住，当涉及到ID时，您的页面上不应该有重复的ID，这对于类来说更实用

Answer 3

我认为选择器中的element包含是从某些浏览器需要它的日子开始的延续（我认为IE5确实存在，但我可能错了）。这不再是必要的，包含元素选择器至少有三个原因是没有意义的：

它减慢了选择器的速度，因为元素选择器比其他两个慢 - 尤其是id。假设优化选择以便首先进行快速选择（例如，在检查元素选择器之前找到具有匹配id的元素），仍然需要检查元素选择器的附加步骤。
它不具有可扩展性，因为您无需更改选择器就无法更改元素。这意味着div.class的功能与label.class不同，但我认为该类应该具有足够的描述性。
它改变了选择器的特异性。对于一些可能希望将<div class="foo">从绿色更改为红色的开发人员来说，这可能会非常令人沮丧：

div.foo { color: green; }
/* below is not applied since the above has higher specificity */
.foo { color: red; }

除非需要支持旧浏览器，否则我从未听过支持type.class的论据。

我应该在'#id'或'.class'选择器前添加元素名称吗？

3 个答案: