CSS选择器

1.class和id的使用场景？

class 选择器：

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示。

例：

.center {text-align:center;}

在上面的例子中，所有拥有center类的HTML元素均为居中。

id 选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

例：

#para1
{
text-align:center;
color:red;
}

在上面的例子中，应用于元素属性id=”para1”。

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]	匹配属性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的元素

4.伪类选择器

选择器	含义
E:first-child	匹配作为长子（第一个子女）的元素E
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

n的取值

1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

5.伪元素选择器

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

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

选择器优先级：从高到底分别是

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

对于复杂场景如何计算优先级

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

• ID选择器的特殊性值，加0,1,0,0;
• 类选择器、属性选择器或伪类，加0,0,1,0;
• 标签选择器和伪元素，加0,0,0,1;
• 通配选择器对特殊性没有贡献，即0,0,0,0;
• 最后比较特殊的一个标志!important(权重)，它没有特殊值，但是他的优先级是最高的，为了方便记忆，可认为他的默认值是1,0,0,0.
  示例如下：

执行效果：

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

四个选择器优先级相同，考虑他们会相互覆盖，应该按照这个顺序：

a:link（未被点击）
a:visited（已被点击）
a:hover（鼠标悬停其上）
a:active（鼠标已经按下，还没有释放）

因为：
1.四个选择器优先级相同，越往后的样式会覆盖前面的样式
2.链接被访问后，样式会发生改变，所以a:visited应放在a:link之后
3.当鼠标悬停在链接上时，无论链接是否已经被访问过，其样式都会发生改变，所以a:hover应放在a:visited之后
4.当鼠标按下链接但未松开时，链接样式会发生改变，但此时也属于鼠标悬停的状态，所以应把 a:active 放在 a:hover 之后，这样可以覆盖a:hover的样式

记这顺序有个小招数，“LoVe？ HA!”。

5.以下选择器分别是什么意思？

·列出你知道的伪类选择器

选择器	含义
E:first-child	匹配作为长子（第一个子女）的元素E
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

n的取值

1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

·div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

·first-child 匹配其父元素的第一个子元素
·first-of-type 匹配其父元素下拥有相同标签的第一个元素

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

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

运行如下：

解析：

.item1:first-child{
  color: red;

item1类下的第一个元素颜色为红色，所以aa为红色

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

item1类下拥有相同标签的第一个子元素背景为蓝色，p标签下第一个子元素是aa,h3标签下第一个子元素是bb,所以aa和bb的背景变为蓝色，ccc是第和h3标签下第二个子元素所以不变。