class和id使用场景？
id选择器
用法：#id名
此id名的标签内的所有子元素都应用
class选择器
用法：.class名
此class名的标签内的所有子元素都应用
当两者同时对某个元素修改样式时，class选择器优先。
CSS选择器常见的有哪几种？
基础选择器
"*" 通用选择器
"#id" id选择器
".class" 类选择器
"element" 标签选择器
组合选择器
E,F 多元素选择器，中间用","隔开，表示同时同时匹配元素E或元素F。
E F 后代选择器，中间用"空格"隔开，匹配元素E的所有后代元素F。
E>F 子元素选择器，中间用">"隔开，匹配元素E的所有直接子元素F。
E+F 直接相邻选择器，中间用"+"隔开，匹配元素E以后的同级元素F。
E~F 普通相邻选择器，中间用"~"隔开，匹配元素E以后的所有同级元素F。
EF 中间不隔开，表示匹配同时有元素E和元素F的元素。
属性选择器
E[attr] 匹配具有属性attr的元素，如div[id]表示匹配所有有id属性的div元素。
属性attr的属性也可选择，如
E[attr=value] ，例：div[id=test]表示匹配所有"id=test"的div元素（虽然id只有一个）
E[attr ~=value]，属性attr有多个属性，且是一个词列表，例：'''<p1 class="test active">,p1[class~=active]'''就会匹配上
E[attr ^=value],同上，但会选择多个属性中第一个为value的元素
E[attr $=value]，同上，但会选择都个属性中最后一个为value的元素
E[attr *=value]，同E[attr ~=value]？
伪类选择器
E:link 匹配所有未被点击的链接
E:hover 匹配被鼠悬停其上的E元素
E:visited 匹配被点击过的链接
E:active 匹配鼠标已经按下但是为松开的E元素
E:focus 匹配获得当前焦点的E元素，比如选择一个文本框就是获得焦点
E:nth-child(n) 匹配E元素的父元素的第N个子元素，第一个编号为1
E:nth-of-type(n) 类似E:nth-child(n)，但是只匹配使用同种标签的元素
E:nth-last-child(n) 匹配E元素的父元素的倒数第N个子元素
E:nth-last-of-type(n) 同理
其中，n的值可以是数字（1，2，3...），可以是公式（2n+1,...），还可以是关键词（odd，even，...）
伪元素选择器
E::before 在E元素之前插入生成的内容，如E::before {content="内容"}，这个时候，“内容”会在E元素之前在浏览器中显示出来
E::after 在E元素之后插入生成的内容，同理。
选择器的优先级是怎样的？对于复杂的场景如何计算优先级？
从高到低：
- 属性后面使用!important
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景：
首先定义四个值a,b,c,d，初始值为0，每包含一个对应选择器则数值+1。
a：作为style属性写在元素标签上的内联样式
b：id选择器
c：类选择器，伪类选择器，属性选择器
d：标签选择器，伪元素选择器
然后从a开始比，如果相同，就比b，如果相同，就比c，...，数值大者，优先级高。
以下选择器分别是什么意思？
#header{
}
----匹配id="header"的元素
.header{
}
----匹配class=“header”的元素
.header .logo{
}
----匹配class="header"的元素的后代元素中class="logo"的元素
.header.mobile{
}
----匹配class="XXXXXXXX"中既有header又有mobile的元素
.header p, .header h3{
}
----匹配class="header"的元素的后代中的p元素或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”的元素的后代中的含有type="text"的input元素
列出你知道的伪类选择器
E:link 匹配所有未被点击的链接
E:hover 匹配被鼠悬停其上的E元素
E:visited 匹配被点击过的链接
E:active 匹配鼠标已经按下但是为松开的E元素
E:focus 匹配获得当前焦点的E元素，比如选择一个文本框就是获得焦点
E:nth-child(n) 匹配E元素的父元素的第N个子元素，第一个编号为1
E:nth-of-type(n) 类似E:nth-child(n)，但是只匹配使用同种标签的元素
E:nth-last-child(n) 匹配E元素的父元素的倒数第N个子元素
E:nth-last-of-type(n) 同理
其中，n的值可以是数字（1，2，3...），可以是公式（2n+1,...），还可以是关键词（odd，even，...）
div:first-child和div:first-of-type的作用和区别
div:first-child 匹配div元素的父元素下的第一个元素
div:first-of-type 匹配div元素的父元素下的的第一个相同标签的元素
区别：
div:first-of-type在匹配时加入了规则“相同标签”
div:first-child 只会匹配一个元素，而div:first-of-type可能有多个。例子见下题。
运行如下代码，解析下输出样式的原因。
<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>
结果：
7.png
CSS：
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
匹配class="item1"的元素的父元素div元素下的第一个子元素
<p class="item1">aa</p>
aa字体为红色，其他的不符合，所以其他的字体不变。
匹配class="item1"的元素的父元素div元素下的相同标签的第一个子元素
<p class="item1">aa</p>
满足条件，背景为蓝色
<h3 class="item1">bb</h3>
为第一个h3标签，bb,满足条件
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
这时，他的父元素的子元素下有两个标签为h3的元素，匹配第一个，不满足，所以cc背景不改变。
网友评论