前端面試題-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(塊格式化上下文)