关于 CSS选择器

---

1.CSS选择器常见的有几种?

• 基础选择器
• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器
  1.课件
  2.css选择器参考资料

2.选择器的优先级是怎样的?

!important > 作为style写在元素上的内联样式的内联样式[<p style="border :1px; >xxx</p>] > id选择器 > 类选择器(class) >伪类选择器(E:hover) > 属性选择器(input[type="button"]{})> 标签选择器(p{}) > 通配符选择器（用*表示的） > 浏览器自定义

3.class 和 id 的使用场景?

构建大框架，只用一次就用id
框架里的内容（公共样式，或者细节），可以使用多次的用class

4.使用CSS选择器时为什么要划定适当的命名空间？

1.更具语义化，方便阅读
2.当需要审查代码时方便查阅这个类是什么，避免错误

5.以下选择器分别是什么意思?

选择器代码.png

• (#header: id名为header的元素
• .header: class为header的元素
• .header .logo: class为header元素下的后代class为logo的元素
• .header.mobile ：class为header和mobile的元素
• .header p , .header h3 class为header元素下的 p和h3的元素
• -#header .nav>li： id为header元素的后代中class为nav的子元素中名为li的元素
• -#header a:hover:id为header元素下的a元素的伪类

6.列出你知道的伪类选择器

a:hover{}
a:active{}
a:link{}
a:visited{}
E:first-child{} 长子中的E元素（要匹配到first-child）
E:first of type{} 父元素下的第一个E元素
E::before在E元素之前插入生成的内容
E::after在E元素之后插入生成的内容

7.:first-child和:first-of-type的作用和区别

first-child 是父元素中的第一个子元素，但是第一个元素一定要是所匹配的子元素，倘若不是就匹配不到
first-of-type 是父元素中的相同元素中的第一个子元素

8.运行如下代码，解析下输出样式的原因。

代码

效果如下：

任务八 style的测试.png

aa为红色是因为 .item1:first-child的意思是item1中的长子，也就是第一个子元素 所以为红色
而aa 和bb为蓝色框是因为 .item:first-of-type的意思是item1中的同类型类型的子元素，也就是p和h3都是他同类型的第一个元素

9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

意思是让块级元素内的行内元素水平居中，作用在块级元素上，因此只要在块级元素的行内都能水平居中，如文本，图片

10.如果遇到一个属性想知道兼容性，在哪查看?

CAN I USE

---