前端基础（问答5）

---

keywords：选择器、优先级、class与id、命名空间、伪类。

---

• CSS选择器常见的有几种?

常见的CSS选择器分为：
1、基础选择器；
2、组合选择器；
3、属性选择器；
4、伪类选择器；
5、伪元素选择器。
1、基础选择器：id选择器、class类选择器、标签选择器；
2、组合选择器：多元素选择器（用逗号分隔）、后代选择器（用空格分隔）、直接子元素选择器（用>分隔）；
3、属性选择器：例如input[type=“text”]；
4、伪类选择器：a:link、a:hover、a:active、a:visited；
5、伪元素选择器：p:after、p:before

• 选择器的优先级是怎样的?

从高至低：
1、属性后加！important
2、作为style属性加载标签内部；
3、id选择器；
4、类选择器；
5、伪类选择器；
6、属性选择器；
7、标签选择器；
8、通配符选择器；
另外，当选择器选择同一属性并具有相同权重时，位于后面的属性将覆盖掉前面的。
当选择器较为复杂时，可通过对各选择器计数来确定最终权重：

#test p.class1 {...}
#test .class1.class2 {...}```
后者有2个id选择器，权重更高。
- ###class 和 id 的使用场景?
class是“某类”的意思，用于标识元素标签。属于同一类的元素，应用同一个class。
id用于标识具有唯一性的元素标签，每个文档页面中，一个id只能用一次（确保唯一性）。

- ###使用CSS选择器时为什么要划定适当的命名空间？
>命名空间表示标识符的可见范围。

划定适当的命名空间，一是为了语义化，保持代码简洁，便于维护；二是精准选择元素，施加样式。

- ###以下选择器分别是什么意思?

![选择器](https://img.haomeiwen.com/i2215361/2d9517008bd794bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ###列出你知道的伪类选择器。
1、:link：匹配未点击的链接；
2、:hover：匹配鼠标悬停时的元素；
3、:active：匹配鼠标点击时的元素；
4、:visited：匹配已点击的元素；
5、:first-child：匹配元素的第一个子元素；
6、:focus：匹配获得焦点的元素；
7、:checked：匹配已选中radio或checkbox元素；
(未完待续)
- ###:first-child和:first-of-type的作用和区别
E:first-child：首先由E筛选出相应元素，再由是否为第一个子元素进行判断。(前一个筛选，后一个验证)
E:first-of-type：首先由E筛选出相应元素，再由是否为同标签下第一个元素进行判断。(前一个筛选，后一个验证)

![对比1](https://img.haomeiwen.com/i2215361/3aee373fe6f4456a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![有效](https://img.haomeiwen.com/i2215361/69bba8de5c40a0d5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![无效](https://img.haomeiwen.com/i2215361/5dbb3de3e0051e46.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- ###text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align:center是块级元素属性，可以使行内元素水平居中，这里的元素不局限于文本，还可以是图像。text-align具有继承性。


![text-align](https://img.haomeiwen.com/i2215361/6b61dc2c00a1b3b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- ###如果遇到一个属性想知道兼容性，在哪查看?
[can i uese](http://caniuse.com/)