前端面试题目整理——css篇

1.css选择器
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
!important >行内样式> ID > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 继承 > 通配符。

• id选择器(#myid)
• 类选择器(.myclassname)
• 标签选择器(div, h1, p)
• 直接相邻选择器(h1 + p)、普通相邻选择器（h1~p）
• 子选择器（ul > li）、后代选择器（li a）
• 通配符选择器（*）
• 属性选择器（a[rel=”external”]）
• 伪类选择器（a:hover, li:nth-child）

css选择器之组合选择器

选择器	含义	作用
E,F	多元素选择器	同时匹配元素E或元素F
E F	后代选择器	匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F	子元素选择器	匹配E元素的所有直接子元素
E+F	直接相邻选择器	匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器（弟弟选择器）	匹配E元素之后的同级元素F（无论直接相邻与否)

css选择器之伪类选择器

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

选择器	示例	示例说明
:focus	input:focus	选择元素输入后具有焦点
:checked	input:checked	选择所有选中的表单元素
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:disabled	input:checked	选择所有禁用的表单元素
:enabled	input:enabled	选择所有启用的表单元素
:in-range	input:in-range	选择元素指定范围内的值
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:valid	input:valid	选择所有有效值的属性
:invalid	input:invalid	选择所有无效的元素
:required	input:required	选择有"required"属性指定的元素属性
:optional	input:optional	选择没有"required"的元素属性
:empty	p:empty	选择所有没有子元素的p元素
:first-of-type	p:first-of-type	选择每个父元素是p元素的第一个p子元素
:last-of-type	p:first-of-type	选择每个p元素是其父元素的最后一个p元素
:first-child	p:first-child	匹配第一个p元素
:last-child	p:last-child	匹配最后一个p元素
:not	:not(p)	选择所有p以外的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素