CSS选择器-入门

1. class 和 id 的使用场景?

class标签，标识一类，全页面不唯一，可以重复，标识一个类别；
id标签，标识一个，全页面唯一。

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

基本选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

单个选择器权重排行（1权重最高，依次递减）

1. !important 权重最重
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

对于复杂场景，选择器优先级分以下4种权重范围：

a. 行内样式，如：<div style="xxx"></div>
b. id选择器
c. 类、属性、伪类选择器
d. 标签、伪元素选择器
以上4种权重范围与复杂场景下的选择器进行匹配，有即得一，没有得零。有a比a，没a比b，依次类推，a权重最高，d权重最低，得出最大最小值。

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

正确排序如下：

a:link {
    color: black;
}
a:visited {
    color: yellow;
}
a:hover {
    color: red;
}
a:active {
    color: brown;
}

此处涉及到了样式覆盖的问题，相同类型的选择器（伪类选择器类型），下面的会自动覆盖上面的。
当未点击时，样式停留在了a:link{color: black;}状态，当点击过时，样式停留在了a:visited{color:yellow;}状态，此时再有悬浮、点击，样式可以正常进行顺序覆盖。

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

#header{
}

id选择器，id为header的标签都会被选择

.header{
}

类选择器，含有类header的标签都会被选择

.header .logo{
}

组合选择器---后代选择器，类header的后代中，含有类logo的，都会被选择

.header.mobile{
}

组合选择器---同时包含选择器，同时包含类header和类mobile的，都会被选择

.header p, .header h3{
}

组合选择器---类header下的标签p和类header下的标签h3会同时被选择

#header .nav>li{
}

组合选择器---id为header下的以nav为类名的所有li标签子元素同时被选择

#header a:hover{
}

id为header下的a的伪类元素hover被选择

#header .logo~p{
}

id为header下的、类为logo的p的所有同级邻居会被选择

#header input[type="text"]{
}

id为header下的、所有input元素的属性为text的标签被选择

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

E:link
E:hover
E:active
E:visited
E:focus
E:disable
E:selection
E:checked
E:enabled
E:root
E:nth-child(n)
E:last-child
E:first-child
E:first-of-type

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

无空格
- div:first-child     匹配div父元素标签下的第一个子元素，不管有多少种类型，只匹配第一种类型的第一个元素
- div:first-of-type   匹配div父元素的每种元素类型的第一个子元素，有N种类型，就匹配N种类下的第一个子元素

有空格
- div :first-child    匹配div标签下的第一个子元素，不管有多少种类型，只匹配第一种类型的第一个元素
- div :first-of-type  匹配div标签下的每种元素类型的第一个子元素，有N种类型，就匹配N种类下的第一个子元素

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>

输出样式：

output.png

>> .items1.first-child匹配其父元素div下的第一个子元素，只有aa生效

>> .item1.first-of-type匹配其父元素div下的每种类型的第一个元素，aa属于p标签，bb属于h3标签，标签不同，都可生效。