CSS选择器

1.class 和 id 的使用场景?

id是设置标签的标识。用于定义一个元素的独特的样式。一个页面中可以有很多个id，但每个id只能定义一个元素。
class是设置标签的类，用于指定元素属于何种样式的类。一个页面中可以有很多个class，并且每一个class都可以指定很多个元素。

2.CSS选择器常见的有几种?

2-1.基础选择器

• 通用元素选择器 *
• id选择器 #id
• class选择器 .class
• 标签选择器 element

2-2.组合选择器

• E,F 多元素选择器
  用于同时选中E和F
• E F 后代选择器
  用于选择E的所有后代F
• E>F 子元素选择器
  用于选择E的所有直接后代F
• E+F 直接相邻选择器
  用于选择E之后相邻的同级F
• E~F 普通相邻选择器
  用于选择E之后的同级F
• .class1.class2以及element#id
  id和class选择器和选择器连写的时候不需要分隔符

2-3.属性选择器

2-4.伪类选择器

• E:first-child
  匹配元素E的第一个子元素。
• E:enabled 以及 E:disabled
  匹配表单中可用/禁用的元素。
• E:nth-child(n)
  匹配其父元素的第n个子元素，第一个编号为1。
• E:nth-last-child(n)
  匹配其父元素的倒数第n个子元素，第一个编号为1。
• E:nth-of-type(n)
  与:nth-child()作用类似，但是仅匹配使用同种标签的元素

2-5.伪元素选择器

• E::before
  在E元素之前插入生成的内容
• E::after
  在E元素之后插入生成的内容

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

3-1.选择器的优先级是怎样的？
从高到低：

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

3-2.对于复杂场景如何计算优先级？
划分成四类，根据abcd的数量来计算优先级。优先选择包含a数量最多的那个，若a数量相同，则选择b数量最多，以此类推。

行内样式

==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

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

顺序是a:link,a:visited, a:hover, a:active。
因为a:link是一直生效的，而a:visited是在链接被访问后一直生效的，若这两个放在后面，则会覆盖a:hover, a:active的效果。

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

Paste_Image.png

6.列出你知道的伪类选择器

• E:first-child
  匹配元素E的第一个子元素。
• E:enabled 以及 E:disabled
  匹配表单中可用/禁用的元素。
• E:nth-child(n)
  匹配其父元素的第n个子元素，第一个编号为1。
• E:nth-last-child(n)
  匹配其父元素的倒数第n个子元素，第一个编号为1。
• E:nth-of-type(n)
  与:nth-child()作用类似，但是仅匹配使用同种标签的元素

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

div:first-child是指父元素下的第一个子元素，且必须为div。
div:first-of-type是指匹配父元素下div中同种标签的第一个元素。

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

Paste_Image.png

Paste_Image.png

.item1:first-child{ color: red;}指的是父元素下第一个item1的字体颜色是红色。这个代码作用于

aa

.item1:first-of-type{ background: blue;}指的是父元素下item1中同种标签的第一个元素的背景颜色是蓝色。这个代码作用于

aa

和

bb