CSS选择器

#id和.class的区别

#id定位到页面上唯一的元素，.class定位到页面上某一类的元素

常见的选择器

基础选择器

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

组合选择器

• 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选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

属性选择器

• 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的元素

伪类选择器

• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:first-child 匹配元素E的第一个子元素
• E:last-child 匹配元素e的最后一个子元素
• E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
• E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)

伪元素选择器

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

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

属性后+!important：li {background: #ddd!important;},所有li背景都是灰色
内联样式：<style></style>
id选择器： #id-height{}
类选择器： .slide{}
伪类选择器：li:nth-child(1){}
属性选择器：input[name=slide]{}
标签选择器：p{}
通用选择器：*{}
浏览器自定义:a{}

• 计算优先级
  行内样式 <div style="xxx"></div> ==> a
  ID 选择器 ==> b
  类，属性选择器和伪类选择器 ==> c
  标签选择器、伪元素 ==> d
  按a>b>c>d的顺序来计算优先级，优先选择a再b再c再d。

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

a{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color:green;
}
a:active{
color:pink;
}

样式从后依次向前覆盖，链接初始为红色，访问后为蓝色（停留在蓝色），鼠标放上去后为绿色（无论有没有被访问过），鼠标按下后变为粉色（无论有没有被访问过）。

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

CSS选择器识别.png

我所知道的伪类选择器

• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:first-child 匹配元素E的第一个子元素
• E:last-child 匹配元素e的最后一个子元素
• E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

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

div:first-child：匹配div块下第一个子元素
div:first-of-type：匹配div块下使用同一种标签的第一个子元素

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

CSS选择器child和type区分.png