课程目标
- 掌握常见 CSS 选择器的用法
- 对选择器优先级有一定认识
课程任务
1. CSS选择器常见的有几种?
- id 选择器
- class 选择器
- 属性选择器，以某个属性作为选择依据。
- 分组选择器，可以对选择器进行分组，被分组的选择器对应的元素就有相同的样式。用逗 号将需要分组的选择器分开。
- 派生选择器，选择某个元素下的子元素，通常用于作用域隔离。
CSS3常用选择器：
- :first-of-type 从一组中选择第一个元素
- :last-of-type 从一组中选择最后一个元素
拓展阅读：
2. 选择器的优先级是怎样的?
从高到低分别是
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为 style 属性写在元素标签上的内联元素。
- id 选择器
- class 选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
选得越精确，越快，权重就越高
3. class 和 id 的使用场景?
- class 使用场景：CSS操作，把一些特定样式放到一个 class 类中。
- id 使用场景: 快速获取标签；或者用于充当 label 标签 for 属性的值。
4. 使用CSS选择器时为什么要划定适当的命名空间？
- 提高代码可读性。
- 便于维护
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
拓展阅读：
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令元素水平居中，作用在块级元素上，让块级元素内部的行内元素水平居中。
