任务8-CSS选择器

课程目标

• 掌握常见 CSS 选择器的用法
• 对选择器优先级有一定认识

课程任务

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

1. id 选择器
2. class 选择器
3. 属性选择器，以某个属性作为选择依据。
4. 分组选择器，可以对选择器进行分组，被分组的选择器对应的元素就有相同的样式。用逗 号将需要分组的选择器分开。
5. 派生选择器，选择某个元素下的子元素，通常用于作用域隔离。

CSS3常用选择器：

• :first-of-type 从一组中选择第一个元素
• :last-of-type 从一组中选择最后一个元素

拓展阅读：

1. CSS 选择器
2. CSS 子元素选择器

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

从高到低分别是

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为 style 属性写在元素标签上的内联元素。
3. id 选择器
4. class 选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

选得越精确，越快，权重就越高

3. class 和 id 的使用场景?

1. class 使用场景：CSS操作，把一些特定样式放到一个 class 类中。
2. id 使用场景: 快速获取标签；或者用于充当 label 标签 for 属性的值。

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

1. 提高代码可读性。
2. 便于维护

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

  #heder {} /* id 是 header的标签 */
  .header {}  /* class 是 header 的标签 */
  .header .logo {}  /* 派生选择器，"父"是 .header ，“后代”是 .logo 的标签 */
  .header.mobile {}  /* class 同时是 .header 和 .mobile 的标签 */
  .header p, .header h3  /* 分组选择器，同时选择 “父”是.header “后代”是 p标签  和 “父”是.header “后代”是 h3标签 */
  #header .nav>li {}  /* “父”是#header “后代”是 .nav 的子标签（注意跟，孙标签区分） */
  #header a:hover {}  /* “父”是 #header “后代”是 a标签的伪类 */

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

• :hover
• :link
• :active
• :fist-child
• :first-of-type
• :nth-of-child()
• :nth-of-type()
• :last-child
• :last-of-type
• :focus

拓展阅读：

CSS伪类选择器

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

:first-child 是选择XX父元素的第一个且"对应的"子元素。（限定顺序上的第一个）（若找不到该“对应的”子元素，此样式无效）。

:first-of-type 是选择XX父元素“对应类型”的第一个。（不限定是顺序上的第一个）（可以同时有不同的类型 type ）

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

 <style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div> 

task8-8.png

• .item1:fisrt-child，对应(.item1)的child是第一个子元素p (其父元素是 .ct)。
  所以选择<p class="item1">aa</p>。
• .item1:first-of-type，对应(.item)的 type 有p和h3。
  所以选择<p class="item1">aa</a> 和 <h3 class="item1">bb</bb>。

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

text-align: center令元素水平居中，作用在块级元素上，让块级元素内部的行内元素水平居中。

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

CanIUse