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数量最多，以此类推。
行内样式 <div style="xxx"></div> ==> 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的字体颜色是红色。这个代码作用于<p class="item1">aa</p>
.item1:first-of-type{ background: blue;}指的是父元素下item1中同种标签的第一个元素的背景颜色是蓝色。这个代码作用于<p class="item1">aa</p>和 <h3 class="item1">bb</h3>
