1. class 和 id 的使用场景?
- 如果标签内容是独一无二的，例如邮箱，身份证等，可以使用id选择器；
image.png
- 如果标签内容是一个类别，例如汽车，食品等，可以使用class选择器；
image.png
2. CSS选择器常见的有几种?
- 基础选择器
image.png
-
属性选择器
image.png -
复合选择器
image.png - 伪类选择器
image.png
image.png
- 伪元素选择器
image.png
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 选择器优先级权重大小按照下顺序：
1. 在属性值后面添加！important，会覆盖页面内任何位置的元素样式。
2. 作为style属性写在标签里面的内联样式。
3. id选择器。
4. class选择器。
5. 伪类选择器。
6. 属性选择器。
7. 标签选择器。
8. 通配符选择器。
9. 浏览器自定义。
- 对于复杂的css场景计算方式：
- 先把所有的选择分成以下几类：
- 行内样式==>a
- ID选择器==>b
- class选择器，属性选择器和伪类选择器==>c
- 标签选择器和伪元素选择器==>d
- 如果同一个元素的样式场景复杂，包含以上分类a的最多，权重最大，如果a相等就看b的个数，如果b的个数也相等，就看c的个数，如果c的个数都相等就看d的个数。
- 先把所有的选择分成以下几类：
image.png
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序为：a:link>a:visited>a:hover>a:active.
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
4.在鼠标点击“未访问链接”同时拥有a:link、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义；
5.在鼠标点击“已访问链接”同时拥有a:vitited、a:hover、a:active三种属性，后面的属性会覆盖前面的属性定义；
6.所以说，a:hover定义一定要放在a:link、a:visited的后面,a:active一定要放在a:hover后面；
5. 以下选择器分别是什么意思?
| css选择器 | 解释 |
|---|---|
| #header{...} | 匹配id="header"的元素。 |
| .header{...} | 匹配class="header"的元素。 |
| .header .logo{...} | 匹配class="header"元素后代所有class="logo"的子元素和递归元素。 |
| .header.mobile{...} | 匹配class="header"和class="mobile"的元素。 |
| .header p, .header h3{...} | 匹配class="header"元素后代所有标签为p的子元素和p的递归元素和class="header"元素后代所有标签为h3的子元素和h3的递归元素 |
| #header .nav>li{...} | 匹配id="header"元素后代为class="nav"的所有子元素和它的递归元素后代的标签为li的直接子元素。 |
| #header a:hover{...} | 匹配id="header"元素后代鼠标悬停其上的标签为a的所有元素及递归元素。 |
| #header .logo~p{...} | 匹配id="header"元素后代class="logo"的所有子元素和它的递归元素之后的同级标签为p的所有元素，不管是否相邻。 |
| #header input[type="text"]{...} | 匹配id="header"元素后代标签为input的所有子元素和它的递归元素的type属性值为"text"的元素 |
}
6. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）.
- div:first-child：匹配其父元素后代第一个标签为div的元素。（必须是其父元素下的第一个标签，否则无效果）
- div:first-of-type：匹配其父元素下使用div标签的第一个元素。（只要是其父元素下的第一个div元素即可匹配）
- div :first-child：匹配div后代的第一个元素。
- div :first-of-type：匹配div后代相同标签的第一个元素。
7. 运行如下代码，解析下输出样式的原因。
image.png
image.png
- .item1:first-child,.item1匹配一个p标签和两个h3标签，:first-child表示必须是其父元素的第一个标签，所有之后p标签里的内容“aa”的颜色为“red”。
:first-of-type表示只要是其父元素下的相同类型的一个元素即可匹配，所以第一个<p>元素和第一个<h3>元素的背景色为“blue”。
