前端面试题-CSS选择器

1、CSS选择器做用

CSS 选择器用于定位咱们想要给予样式的 HTML 元素，但不仅是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，好比 document.document.querySelectorAll。

2、选择器类型

1. 基本选择器
2. 组合选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器

3、基本选择器

选择器	含义	做用	CSS
.class	类选择器	匹配 class 包含(不是等于)特定类的元素	1
#id	id选择器	匹配特定 id 的元素	1
*	通用元素选择器	匹配页面任何元素（这也就决定了咱们不多使用）	2
element	元素选择器	选择HTML元素	1

4、组合选择器

选择器	含义	做用	CSS
E,F	多元素选择器	同时匹配元素E或元素F	1
E F	后代选择器	匹配E元素全部的后代（不仅是子元素、子元素向下递归）元素F	1
E>F	子元素选择器	匹配E元素的全部直接子元素	2
E+F	直接相邻选择器	匹配E元素以后的相邻的同级元素F	2
E~F	普通相邻选择器（弟弟选择器）	匹配E元素以后的同级元素F（不管直接相邻与否）	3

5、属性选择器

选择器	示例	示例说明	CSS
[attribute]	[target]	选择全部带有target属性元素	2
[attribute=value]	[target=-blank]	选择全部使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的全部元素	2
[attribute ^= language]	[lang ^= en]	选择一个lang属性的起始值="EN"的全部元素	2
[attribute $= language]	[lang $= en]	选择一个lang属性的结尾值="EN"的全部元素	2
[attribute *= language]	[lang *= en]	选择一个lang属性的包含"EN"的全部元素	2

6、伪类选择器

选择器	示例	示例说明	CSS
:link	a:link	选择全部未访问连接	1
:visited	a:visited	选择全部访问过的连接	1
:hover	a:hover	把鼠标放在连接上的状态	1
:active	a:active	选择正在活动连接	1
:focus	input:focus	选择元素输入后具备焦点	2

全部伪类选择器在前端面试题-伪类和伪元素

7、伪元素选择器

选择器	做用	说明	CSS
::before/:before	在被选元素前插入内容。	须要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。	2
::after/:after	在选被元素后插入内容	其用法和特性与:before类似。	2
::first-letter/:first-letter	匹配元素中文本的首字母。	被修饰的首字母不在文档树中。	1
::first-line/:first-line	匹配元素中第一行的文本。	这个伪元素只能用在块元素中，不能用在内联元素中。	1

全部伪元素选择器在前端面试题-伪类和伪元素

扩展阅读

1. 前端面试题-clearfix（清除浮动）
2. 前端面试题-BFC(块格式化上下文)