曲径通幽论坛

标题: 关于选择器的一些小结 [打印本页]

作者: beyes 时间: 2016-12-13 00:04
标题: 关于选择器的一些小结
各种选择器的使用场合

1. 类选择器一般是提供给一类具有相同特性的元素来使用，这些元素数量一般比较多，在一个页面或整个站点中多处都会出现且要求具有同一风格的。

2. id 选择器往往提供给某一个元素来使用，而不是像类那样要提供给多人使用。

3. 在不清楚将来有多少个 html 元素要使用该样式时，建议使用类选择器，而不是 id选择器。这是因为，如果在网页中有使用 javascript ，它会通过 id 来获取元素，而如果多个元素共用同一个 id 时，javascript 就会无法工作。

4. 类选择器的优先级要高于 HTML 标签选择器。

5. 父元素的一些样式会被子元素继承，如果子元素已经有同样的样式定义，那么以子元素的为准。

6. 对于同一个 html 标签，如何进行不同的 CSS 样式指定？方法是：

html 标签.类选择器 {
属性名:属性值;
}

7. 伪类选择器一般用来控制超链接相关样式。

8. 希望针对不同的超链接指定不同的样式怎么办？方法是在超链接标签里再加一个 class ，示例如下：

a.lingyige-a:link {
color:red;
}
<a class="lingyige-a" href="http://www.groad.net">曲径通幽</a>

如果只是 a:link { } ，这是一种伪类选择器的写法，描述的是所有 <a> 标签下的普通超链接样式。由于要单独指定某个 <a> 标签，那么必须要有个名称将其区分，而增加一个类名是个比较好的选择，因此就写成： a.lingyige-a:link ，表示描述 “名字为 lingyige-a” 的<a> 标签下的普通链接样式。

9. 如果希望所有的元素都符合某一种样式，可以使用通配符选择器。
比如 * { margin:0; padding:0} 可以让所有 html 元素的外边距和内边距都默认为0，有时会特别有用（不同浏览器默认的边距并不一定相同，如此清零设置后，以后再以该绝对值来算其它元素的距离就不会出现偏差）。纵观许多大网站，都会用如此设置。

10. 多元素选择器 --- 组合选择器的语法：

.ad1, .ad2, .ad3 {
.....
}

将 .ad1, .ad2, .ad3 3个元素的共同描述部分放到一起。注意，上面示例中的 3 个元素是类选择器，但组合选择器并非只能对类选择管用，组合到一块的元素还可以是 id 选择器，标签选择器等。此外，如果样式定义发生冲突，比如 A 和 B 同时有定义相同的样式，以后面定义的为准。

11. 类选择器的优先级要高于标签选择器。
12. 在使用后代选择器时，应尽量使用标签选择器，或者类选择器和标签选择器的组合。

13. 一个元素最多有一个 id 选择器，但可以有多个类选择器，比如：

<ul class="class-1 class-2">

为什么这么做？比如一个互联网门户公司，一帮员工写了一堆代码，过了几年后离职，接着又一帮员工进来，他们不敢改原来的代码（大网站改代码牵一发而动全身），因此自己又写了一套代码对之前的进行约束，这样一个元素日积月累的，就会看到有许多个类在描述。需要注意一点的是，当两个类选择器的优先级相同时，且描述发生了冲突，以写在 style 内容中的后面那个为准。
14. 当一个元素被多个选择器同时限定时，优先级是：
!important设置 > 行内样式设定 > id 选择器 > 类（伪类）选择器 > html 选择器 > 通配符选择器 > html 属性设置 > 继承的样式属性（所谓“层叠”，就是体现在一层一层的属性继承上，不过层叠的样式是文本/字体的属性）。比如下面代码：

<style type=text/css">
.span1 {
color:red;
}
</style>
... ...
<body>
<span class="span1" style="color:blue;">什么颜色</span>
</body>

上面的代码使得 “什么颜色” 4 个字呈蓝色显示。这是因为，行内样式的优先级高于类选择器。如果在上面代码的 color:red; 改为 color:red !important; ，那么结构是那几个字呈现红色。
15. 组合选择器的优先级

（1）对组合选择器的每一个单项选择器从大到小的一次比较，谁的更高一级的单项选择器的数量多，谁的优先级高。如果数量相等，则继续比较下一级的单项选择器的数量多少，依此类推。

（2）如果最终比较的结果优先级方面完全一样，则后面的设定会覆盖前面的设定。

（3）简单公式，假定 id 的优先级值为 1000； class 的优先级值为 100； html 标签的优先级值为 10 。进行求和比较，值越大，那么该组合选择器的优先级就越高。但是一定要注意，要求组合层级不能过多，否则这个公式就是错误的，因此该公式并不是一个严谨的公式。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)