一、class 和 id 的选择场景。
在 CSS 中，
class和id都可以用来作为选择器来修改对应元素的样式，但是，有这些事情需要留意：
- 虽然
id可以像class一样可以有多个，但id是被推荐一个页面只出现一次作为标准。 -
id更主要的应用于 JS 中获取元素节点，而class更多用于 CSS 样式，因为可重复，所以样式也可以通用。 -
id拥有更大的权重，因此使用要更加注意。
二、CSS 选择器常见有哪几种？
- 简单选择器
- 通用选择器（*）
- 元素选择器（div、p、h1...）
- 类选择器（class）
- id 选择器（id）
- 属性选择器（element[attr]...）
- 伪类选择器（element:nth-child(n)...）
- 伪元素（element:after...）
- 组合器（class class...）
- 多用选择器（class, class,...）
参考：选择器 | MDN
三、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
CSS 每种选择器都是有对应的权重大小的，如果权重相同，将使用最后定义的样式。另外,网上有教程说 CSS 的权重分类为0、1、10、100、1000，然后加起来比较最终权重大小，这种说法是不准确的。
选择器权重的计算
- A：如果该样式是
内联样式，则A = 1，否则A = 0。对于内联元素，没有类选择器、id 选择器、伪类选择器等，所以权重是A = 1, B = 0, C = 0, D = 0，加起来就是(1-0-0-0)，最大。 - B：该样式中 id 选择器的数量。如
#id{color: red;}，则B = 1，否则B = 0。 - C：该样式中类选择器（class）、伪类选择器、属性选择器的数量。
- D：该样式中伪元素选择器（
element::after {}）、元素选择器（Element）的数量。 - 计算。
(A-B-C-D)中，从左到右权重越来越小。
举个例子：
/* 权重为 0-0-0-11 */
body header div nav ul li div p a span em {
color: red;
}
/* 权重为 0-0-1-0 */
.count {
color: blue
}
/*
* 1. 结果 ==> 由于下方样式的 .count 在 C 位有数值，上方样式前三个都为零，所以最后显示的颜色是蓝色。
* 2. 如果这里按照网上 0，1，10，1000 那种相对简单的计算的话，上方样式权重应该是 11，而下方样式的权重是 10，应为红色
* 3. 正确结果是哪个，你可以自己试试
*/
附上一个上述测试的在线演示
四、a:link,a:hover,a:active,a:visited的顺序是怎样的？ 为什么？
首先四者的权重是一样的，所以样式应该是顺序覆盖的，假如状态重叠的话。
- 当一个链接没有点击的时候，它的状态是
link。 - 鼠标移上去的时候，状态是
link + hover，根据顺序覆盖原则，hover只有写在link下面才得以显示。此时顺序：
a:link {xxx}
a:hover {xxx}
- 当鼠标点击链接的时候，是
visited状态，所以样式显示正常，但若想要鼠标经过，触发状态就变成visited + hover，同理，要显示hover，就需要hover写在visited下面，此时顺序：
a:link {xxx}
a:visited {xxx}
a:hover {xxx}
-
active是特殊的状态，指鼠标点击链接后还没松手的状态，此时，状态应该是visited + active + hover，若想显示此时的avtive，就需要把它写在最后，此时顺序：
a:link {xxx}
a:visited {xxx}
a:hover {xxx}
a:active {xxx}
综上，链接的正确样式书写顺序应该是L(link) --> V(visited) --> H(hover) --> A(active)。另外，做测试的时候，由于浏览器有缓存，所以你点击过链接一次之后，在你关闭浏览器之前它都会是已点击状态，要学会先清除缓存。
五、以下选择器分别是什么意思?
/* 设置 id 为 header 的样式 */
#header{
}
/* 设置 class 为 header 的样式 */
.header{
}
/* 设置 class 为 header 下 class 为 logo 的样式 */
.header .logo{
}
/* 设置同时拥有 class 为 header 和 mobile 的样式 */
.header.mobile{
}
/* 设置 class 为 header 下 p 元素 和 header 下 h3 元素的样式 */
.header p, .header h3{
}
/* 设置 id 为 header 下 class 为 nav 下第一子代 li 元素的样式 */
#header .nav>li{
}
/* 设置 id 为 header 下 a 元素 hover 鼠标经过的样式 */
#header a:hover{
}
/* 设置 id 为 header 下 class 为 logo 的自身之后弟弟节点 p 元素的样式 */
#header .logo~p{
}
/* 设置 id 为 header 下 input 元素的 type 为 text 的样式 */
#header input[type="text"]{
}
以上选择均是多选。
六、列出你知道的伪类选择器
/* a 标签全家桶 */
a:link {}
a:visited {}
a:hover {}
a:active {}
element:focus {}
/* 子类选择器 */
element:first-child {}
element:last-child {}
element:nth-child(n) {}
element:nth-last-child(n) {}
七、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
首先看看
first-child和first-of-type这两个选择器的含义：
- The
:first-childCSS pseudo-class represents the first element among a group of sibling elements. 意思是：匹配所有兄弟元素中的第一个元素。first-child | MDN
<style>
.test1:first-child {
background-color: red;
}
.test2 :first-child {
background-color: blue;
}
</style>
<body>
<div class="test1">
<div>你好</div>
<div>你好</div>
<p>你好</p>
<p>不好</p>
</div>
<div class="test2">
<div>你好</div>
<div>你好</div>
<p>你好</p>
<p>不好</p>
</div>
</body>
在线演示。同样的结构，差别是第一个样式
first-child前没有空格，后一个有空格。没有空格时，是指定匹配，当匹配该元素所有兄弟元素中的第一个元素（即该元素的父元素的第一个子元素）刚好是第一个元素，则生效，否则不生效。有空格时，表示以first-child前的元素作为父元素（若没有则为body），匹配该父元素下的所有第一后代元素的第一个元素。也就是说，有空格的first-child永远都能匹配到对象，根是body；而没有空格的first-child是指定了一个元素的，当这个元素不是第一兄弟元素时，样式就不生效。
- The
:first-of-typeCSS pseudo-class represents the first element of its type among a group of sibling elements. 意思是：匹配同一兄弟且同一种类元素的第一个元素。first-of-type | MDN
<style>
test1:first-of-type {
background-color: red;
}
test2 :first-of-type {
background-color: blue;
}
</style>
<body>
<div class="test1">
<p>你好</p>
<p>你好</p>
<div>你好</div>
<div>你好</div>
</div>
<div class="test2">
<p>你好</p>
<p>你好</p>
<div>你好</div>
<div>你好</div>
</div>
</body>
在线演示。
first-of-type和first-child的唯一差别是，first-child匹配的同兄弟节点的第一，first-of-type匹配的是同兄弟节点的同种元素节点的第一，也就是说，当兄弟节点中有<div>和<p>，那么first-of-type匹配后首个<div>和<p>样式都会生效。
有个差不多的选择器nth-of-type，用法也差不多，不过记得，在 CSS 的伪类选择器中，下标是从 1 开始的。
八、运行如下代码，解析下输出样式的原因。
<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>
运行结果。就如同上文分析的一样，第一种样式
first-child的意思是.item1的兄弟节点的第一个元素等于当前元素，就生效。第二种样式first-of-type的意思是.item1的兄弟节点的同一种类元素的第一元素等于当前元素，就生效。
网友评论