1. class 和 id 的使用场景?
class用于选择同一类型的元素，id用于选择独一无二的一个元素
2 CSS选择器常见的有几种?
- 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
-
id id选择器，匹配特定id的元素
- .class 类选择器，匹配class包含(不是等于)特定类的元素
- element 标签选择器
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
顺序为
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
对于复杂场景如何计算优先级？
１．根据组合选择器按照以下规则统计各类选择器的个数：
行内样式 --> 统计值为a
ID选择器 --> 统计值为b
类、属性选择器、伪类选择器 --> 统计为c
标签选择器、伪类选择器 --> 统计为d
2.
再比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高；
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序为
- a:link
- a:visited
- a:hover
- a:active
因为这几个选择器的优先级一样，但是他们的样式会互相覆盖。所以要按一定的顺序排列。
5. 以下选择器分别是什么意思?
header{ } id=header的元素
- .header{ } class=header的元素
- .header .logo{ } class=header 后代中 class=logo的元素
- .header.mobile{ } 同时包含class=header和class=mobile的元素
- .header p, .header h3{ } class=header后代中的p标签和h3标签
-
header .nav>li{ } id=header的后代中class=nav元素的直接子元素为li的标签
-
header a:hover{ } id=header后代中的a标签在鼠标停留在上面的状态
-
header .logo~p{ } id=header后代中 class=logo元素之后所有同级元素的p标签
-
header input[type=“text”]{ } id=header的后代中，input标签中，属性type的值为"text"的所有元素
6. 列出你知道的伪类选择器
- 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 匹配用户当前选中的元素
8. div:first-child和div:first-of-type的作用和区别
- div:first-child 匹配其父元素的第一个子元素
- div:first-of-type 匹配其父元素下拥有相同标签的第一个元素
9. 运行如下代码，解析下输出样式的原因。
网友评论