css选择器

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元素之后插入生成的内容

---

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

• 简单场景

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

• 复杂场景
  可设：
  行内样式
  ==> 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的元素中的所有后代 标签和 标签
#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的作用和区别 （注意空格的作用）

1. div:first-child 匹配div的父元素下子，第一个子元素是div的元素
2. div:first-of-type div的父元素的子元素里面，第一个类型为div的元素
3. div :first-child 匹配所有div元素内所有元素中属于其父元素的首个子元素
4. div :first-of-type 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

---

运行如下代码，解析下输出样式的原因。

---

 

   
aa
   
bb
   
ccc
 

.item1:first-child{
  color: red;
}

class为item1的兄弟元素的第一个color为red；

.item1:first-of-type{
  background: blue;
}

class为item1的兄弟元素第一个元素且第一次出现的 background为 bluer；
注意：一定要是兄弟元素。

---