5. CSS选择器

1. class 和 id 的使用场景：

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

2. CSS常见选择器：

1. 基础选择器

• * : 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
• #id : id选择器，匹配特定id的元素
• .class: 类选择器，匹配class包含(不是等于)特定类的元素
• element: 标签选择器

2. 组合选择器

• E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
• E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
• E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
• E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
• E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
• .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，.和 # 本身充当分隔符的元素
• element#id id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素

3. 属性选择器

• E[attr] 匹配所有具有属性为attr的元素（div[id]能选择所有具有id属性的div）
• E[attr=value] 匹配所有属性为value的元素（div[type=text]匹配id=text的div）
• E[attr~=value] 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
• E[attr ^=value] 匹配属性attr的值以value开头的元素
• E[attr $=value] 匹配属性attr的值以value结尾的元素
• E[attr *=value] 匹配属性attr的值包含value的元素

4. *伪类选择器

• E:first-child 匹配元素E的第一个子元素
• E:last-child 匹配元素e的最后一个子元素
• E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
• E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
• E:hover 匹配鼠标悬停的e元素
• E:focus 匹配获得焦点的e元素

5. 伪元素选择器

• E::first-line 匹配E元素的第一行
• E::first-letter 匹配E元素的第一个字母
• E::before 在e元素之前插入生成的内容
• E::after 在e元素之后插入生成的内容

3. 选择器的优先级及计算：

1. 属性后+!important：p {color:#ccc!important;}
2. 内联样式：
3. id选择器： #id
4. 类选择器： .class
5. 伪类选择器：a:link
6. 属性选择器：h1{}
7. 标签选择器：p[XXX]
8. 通用选择器：*
9. 浏览器自定义

复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

权重计算规则：

1. 第一等：代表内联样式，如: style=" "，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。
   !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

比较规则：

1. 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
2. 无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。
3. 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
4. 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
   实例：

a{color: yellow;} /*特殊性值：0,0,0,1*/
 div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
 .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
 .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
 #demo a{color: orange;} /*特殊性值：0,1,0,1*/
 div#demo a{color: red;} /*特殊性值：0,1,0,2*/
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>

4. a:link, a:hover, a:active, a:visited 意义及顺序：

• a伪类解释：

1. link：设置a对象在未被访问前的CSS样式；
2. visited：设置a对象在其链接地址已被访问过时的CSS样式；
3. hover：设置对象在其鼠标悬停时的CSS样式；
4. active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的CSS样式；
5. focus : 代表的是获取焦点时的样式，这个我们可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式。

• 顺序：
  a伪类的顺序为：a:link > a:visited > a:focus >a:hover > a:active。
  前四个的顺序有个比较简便的记忆方法：L-V-H-A，即love & hate。
• 原因：

1. 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2. 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
3. a:active是鼠标点击与释放之间发生的事件，并拥有鼠标悬停a:hover属性；

由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。
所以说，a:hover定义一定要放在a:link、a:visited的后面，才能在鼠标悬停时，a:hover样式不被a:link和a:visited样式覆盖；

1. a:visited一定要放在a:link的后面，因为这样能保证访问过的链接具有a:visited样式，并能覆盖a:link默认样式；
2. a:active一定要放在a:hover后面。假如a:active放在a:hover前面，由于a:active拥有鼠标悬停a:hover属性，当鼠标按下时，首先会触发a:hover事件，然后触发
3. a:active，但是a:ctive已被a:hover的样式所覆盖，因此无法看到a:active的样式。所以，a:active一定要放在a:hover后面。
4. 补充a:focus的顺序：
   • :hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，因为hover排在后，会覆盖focus样式。

- 如果:hover排在前，:focus排在后，则当光标获得焦点时显示:focus的样式，但当光标经过链接时，样式并未显示:hover的样式，而是继续是:focus的样式，因为应用的focus样式在hover之后，覆盖了前面的样式。

可用以下代码进行具体演示

a:focus{
color:black;
text-decoration:underline;
}

a:hover{
color:#FF0000;
text-decoration:underline;  
}

a:active{
color:#FFCC00;
}

综上所述，a伪类的顺序为：a:link > a:visited > a:focus > a:hover > a:active。

5. 选择器举例：

/*id选择器，匹配id值为header的元素*/
#header{
}
/*class选择器，匹配class值为header的所有元素*/
.header{
}
/*后代选择器，匹配class值为header元素的所有class值为logo的后代*/
.header .logo{
}
/*匹配class值包含header和mobile的元素 */
.header.mobile{
}
/*匹配class值为header元素后代中的p和h3元素*/
.header p, .header h3{
}
/*匹配id值为header元素后代中class值为nav元素中的li元素*/
#header .nav>li{
}
/*为id值为header元素后代中的a元素指定鼠标移动到其上方的样式 */
#header a:hover{
}
/*在id值为header的元素后代中寻找：class值为logo元素之后的同级p元素*/
#header .logo~p{
}
/*在id值为header的元素后代中寻找type属性为”text"的input元素*/
#header input[type="text"]{
}

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

div:first-child 匹配的是 div 的父元素下第一个子元素，而 div:first-of-type
匹配的是父元素下同种元素类型的第一个子元素。例如：

<div class="father">
  <h1 id="child1">AA</h1>
  <h2 id="child2">BB</h1>
  <h3 id="child3">CC</h1>
  <h2 id="child4">DD</h1>
</div>

如果有选择器如下：
#child2:first-child，选中AA；
#child2:first-of-type，选中BB；
#child4:first-child，选中AA；
#child4:first-of-type，选中BB。

实例如下：

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>

<div class="ct"> 
    <p class="item1">aa</p> 
    <!-- 父元素div下第一个类为item1的子元素，父元素div下第一个类为item1的p标签子元素，
    因此满足.item1:first-child和.item1:first-of-type-->
    <h3 class="item1">bb</h3>
    <!-- 父元素div下第一个类为item1的h3标签子元素，满足.item1:first-of-type-->
    <h3 class="item1">ccc</h3> 
</div>

输出结果如下：