class 和 id 的使用场景?
- id不能重复一般用于独一无二的标签
- class用于重复元素相同样式
CSS选择器常见的有几种?
- 基础选择器
#id{} id选择器
.clas{} 类选择器
element{}元素选择器
- 组合选择器
e,f 匹配e，f两个元素
e f 匹配e的所有f子元素
e>f 匹配e的直接子元素f
e+f 匹配e的下一个同辈元素f如果没有则不匹配
e~f 匹配e的所有f同辈元素
.class.class1 匹配同时存在class和class1的元素
- 属性选择器
E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value] 匹配属性attr的值以value开头的元素
E[attr $= value] 匹配属性attr的值以value结尾的元素
E[attr *= value] 匹配属性attr的值包含value的元素
- 伪类选择器
E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
- 伪元素选择器
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 简单场景
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 复杂场景
可设：
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
如:
p.a#c>p>a[href="#"] //a=0,b=1,c=2,d=3
div+p>a+a>img //a=0,b=0,c=0,d=5
所以是第一个更重要。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- link→visited→hover→active
- 因为如果如果一个鼠标hover到一个链接时候同时会有两个状态link hover如果顺序正确他会显示最下面的hover，如果把visited写在最后面，那么如果这个链接一旦访问以后这个visited把前面四个状态都给覆盖了，之后不管你怎么碰他都是visited的颜色。
以下选择器分别是什么意思?
| 文件路径 | 意义 |
|---|---|
| #header{} | ID为header的元素 |
| .header{} | class为header的所有元素 |
| .header .logo{} | class为header下class为logo的所有元素 |
| .header.mobile{} | class同时具有header，mobile的元素 |
| .header p, .header h3{} | 选择class为header的元素中的所有后代<p>标签和<h3>标签 |
| #header .nav>li{} | id为header的后代中class为nav的后代li |
| #header a:hover{} | id为header的元素的后代中标签为a的元素被鼠标hover时的状态 |
| #header .logo~p{} | id为header的元素中的class为logo的后代元素的后面的所有同级p标签 |
| #header input[type="text"]{} | id为header的元素中的文本框 |
列出你知道的伪类选择器
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:focus 匹配获得焦点的元素
E:checked 匹配radio，select的选中元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
- div:first-child 匹配div的父元素下子，第一个子元素是div的元素
- div:first-of-type div的父元素的子元素里面，第一个类型为div的元素
- div :first-child 匹配所有div元素内所有元素中属于其父元素的首个子元素
- div :first-of-type 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素
运行如下代码，解析下输出样式的原因。
<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>
.item1:first-child{
color: red;
}
class为item1的兄弟元素的第一个color为red；
.item1:first-of-type{
background: blue;
}
class为item1的兄弟元素第一个元素且第一次出现的 background为 bluer；
注意：一定要是兄弟元素。
