CSS样式6中基础选择器
- id选择器：#id
- 类选择器：.class
- 属性选择器：a[href="http://www.baidu.com"]
- 伪类和伪元素选择器：:hover，:after
- 标签选择器：div
- 通配选择器：*
CSS权重
css权重指的是这些选择符的优先级，优先级高的CSS样式会覆盖优先级低的样式。
CSS权重计算方式
- 计算选择符中的ID选择器的数量（=a）
- 计算选择符中类、属性和伪类选择器的数量（=b）
- 计算选择符中标签和伪元素选择器的数量（=c）
- 忽略全局选择器
在分别计算a、b、c的值后，按顺序连接abc三个数字组成一个新的数字，改值即为所计算的选择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。
示例：
div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 121/
如果设置合适的CSS权重
定义选择符的原则是尽量是选择符的权重低，目的是保证样式在应用于多个元素时容易被覆盖，这样提高样式代码的重用性和可维护性。
CSS样式中尽量不要使用ID选择器
按照规定，一个页面只允许有一个ID，如果使用了ID选择器就意味着此样式只作用于一个元素，该样式没办法重用与其他样式。更要一点在于，ID选择器具有很高的权重，如果覆盖使用ID选择器的样式，就必须在原来使用ID选择器的基础上添加新的选择符或是使用!important，但这样做使无法重用的代码会越来越多。
示例：
假设有下面一段HTML代码：
<div id="app">
你好！<span>先生，</span><span class="important">请小心！</span>
</div>
然后css代码如下：
#app {
color: green;
}
#app span {
color: blue;
}
.important {
color: red;
}
此时你会发现，“请小心”三个字并未如期望的那样显示红色，这是因为#app span的权重要比.important的权重高。所以要想提高后者的权重，可以采用如下的方式：]
#app .important {
color: red;
}
或
.important {
color: red; !important
}
但是，上面两种方式都不太友好。第一种方式的样式无法得到重用，第二种样式的权重又最高，无法被覆盖。所以最佳的解决方法是尽可能的使用较低权重的选择器作为基础样式，比如使用类选择器。
减少子选择器的层级
减少选择器的层级的过程也是降低选择符整体权重的过程。同时，子选择器的层级越少，对HTML结构的依赖就越低。因此，在定义选择器时，应该尽量让层级少一些。如果代码中出现子选择器过多的情况，大多数是因为样式代码整体的结构混乱。在向其中一个模块添加样式时，为了避免样式“污染”其他模式，就会添加额外的父选择器来限定样式的作用域。
CSS选择器层级过多的另一个“罪魁祸首”是sass和less等工具的滥用。sass和less是非常好的工具，可以很方便地管理css选择符的层级关系，但并不是说非要按照HTML结构层级关系写对应的css样式代码。在使用这两个工具时，还是应尽量让选择器的层级减少，把通用的样式提取出来，保证代码的最大量重用。
使用组合的CSS类选择器
使用CSS选择器组合的方式，开发者可以不用考虑CSS样式覆盖的问题，避开了计算选择符权重的过程，同时也提高了代码的重用性。
网友评论