任务8-CSS选择器

一、CSS选择器常见的有几种?

1.元素选择器 h1{color:red;},p{color:blue;};
2.分组选择器 h1,h2,h3,p{color:red;};
3.class选择器 .new{background:#ccc;};
4.id选择器 #new{background:red;};
5.属性选择器 a[href] {color:red;}；
6.后代选择器：div p{font-size:16px;}
7.直接子元素选择器：div>p{font-size:16px;}（父元素下面的第一个子元素）；
8.相邻元素选择器：li+li{font-weight:bold;}(同级相邻元素)；
9.伪类选择器：

• a:hover{color:red}当鼠标悬浮在元素上方时，向元素添加样式；
• a:first-child{color:red}向元素的第一个子元素添加样式；

10.CSS3新添加的选择器：

• :first of type 从一组中选择第一个元素添加样式；
• :last of type 从一组中选择最后一个元素添加样式；

二、选择器的优先级是怎样的?

排名：
1.在样式里面定义！important优先级最高；
2.id选择器；
3.class选择器；
4.伪类选择器；
5.属性选择器；
6.元素选择器；

三、class 和 id 的使用场景?

1.id适用于整体区域大区块的布局，一个id只能使用一次；
2.class适用于区块内部的小部分布局，样式的设置，可以重复使用；

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

1.保证代码的可读性和易维护；
2.符合语义化；

五、以下选择器分别是什么意思?

1、#header{} 元素命名为header的布局样式；
2、.header{} 元素为类名header的布局样式；
3、.header .logo{} 类名为header元素下面的子元素class=logo的样式；
4、.header .mobile{} 类名为header元素下面的子元素class=mobile的样式；
5、.header p, .header h3{} 类名为header元素下面的子元素p和h3的样式；
6、#header .nav>li{} 元素命名为header下面的子元素class=nav下面的第一个子元素li的样式；
7、#header a:hover{} 当鼠标悬浮在命名为header的元素下面时子元素a的样式；

六、列出你知道的伪类选择器

1. :active 向被激活元素添加样式；
2. :focus 向拥有键盘输入焦点的元素添加样式；
3. :hover 当鼠标悬浮在元素上方时，向元素添加样式；
4. :link 向未被访问的链接添加样式；
5. :visited 向已被访问的链接添加样式；
6. :first-child 向元素的第一个子元素添加样式；
7. :lang 向带有指定 lang 属性的元素添加样式；
8. :first of type 从一组中选择第一个元素添加样式；
9. :last of type 从一组中选择最后一个元素添加样式；

七、:first-child和:first-of-type的作用和区别

1.作用：

示例

• p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；
• h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
• span:first-child 匹配不到任何元素，因为在这里两个span元素都不是 -div的第一个子元素；

示例

• p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
• h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
• span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

2.区别

• :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素；
• :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了；

ps：答案引用博客园的一篇文章，简单好理解。

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

代码 示例

原因：

• .item1:first-child 匹配的是父元素的第一个子元素，所以只有aa变成了红色；
• .item1:first-of-child 是指父元素中所有元素为p和h3的第一个，所以aa和bb的背景色变为蓝色；

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

1.作用：文本水平居中；
2.作用在行内元素上；
3.添加了样式为display:inline-block的块状元素；

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

网站：http://caniuse.com/

示例

本教程版权归本人和饥人谷所有，转载须说明来源