1. 常用的CSS選擇器

CSS選擇器的作用就是從HTML頁面中找出特定的某類元素。常用的幾類CSS選擇器如下表所示。

選擇器代碼示例代碼說明

通用選擇器	*	*{}	選擇所有元素。
標(biāo)簽選擇器	元素名稱	a{}、body{}、p{}	根據(jù)標(biāo)簽選擇元素。
類選擇器	.<類名>	. beam {}	根據(jù)class的值選擇元素。
id選擇器	#<id值>	#logo{}	根據(jù)id的值選擇元素。
屬性選擇器	[<條件>]	[href]{}、[attr=”val”]{}	根據(jù)屬性選擇元素。
并集選擇器	<選擇器>,<選擇器>	em,strong{}	同時(shí)匹配多個(gè)選擇器，取多個(gè)選擇器的并集。
后代選擇器	<選擇器> <選擇器>	.asideNav li {}	先匹配第二個(gè)選擇器的元素，并且屬于第一個(gè)選擇器內(nèi)。
子代選擇器	<選擇器> > <選擇器>	ul>li{}	匹配匹配第二個(gè)選擇器，且為第一個(gè)選擇器的元素的后代。
兄弟選擇器	<選擇器>+<選擇器>	p+a{}	匹配緊跟第一個(gè)選擇器并匹配第二個(gè)選擇器的元素，如緊跟p元素后的a元素。
偽選擇器	: :<偽元素>或: <偽類>	p::first-line{}、a:hover{}	偽選擇器不是直接對應(yīng)HTML中定義的元素，而是向選擇器增加特殊的效果。

2. 偽元素選擇器

元素名描述

::first-line	匹配文本塊的首行。如p::first-line表示選中p元素的首行。
::first-letter	匹配文本內(nèi)容的首字母。
::before	在選中元素的內(nèi)容之前插入內(nèi)容。
::after	在選中元素的內(nèi)容之后插入內(nèi)容。

3. 偽類選擇器

元素名描述

:root	選擇文檔中的根元素，通常返回html。
:first-child	父元素的第一個(gè)子元素。
:last-child	父元素的最后一個(gè)子無素。
:only-child	父元素有且只有一個(gè)子元素。
:only-of-type	父元素有且只有一個(gè)指定類型的元素。
:nth-child(n)	匹配父元素的第n個(gè)子元素。
:nth-last-child(n)	匹配父元素的倒數(shù)第n個(gè)子元素。
:nth-of-type(n)	匹配父元素定義類型的第n個(gè)子元素。
:nth-last-of-type(n)	匹配父元素定義類型的倒數(shù)n個(gè)子元素。
:link	匹配鏈接元素。
:visited	匹配用戶已訪問的鏈接元素。
:hover	匹配處于鼠標(biāo)懸停狀態(tài)下的元素。
:active	匹配處于被激活狀態(tài)下的元素，包括即將點(diǎn)擊（按壓）。
:focus	匹配處于獲得焦點(diǎn)狀態(tài)下的元素。
:enabled (:disabled)	匹配啟用（禁用）狀態(tài)的元素。
:checked	匹配被選中的單選按鈕和復(fù)選框的input元素。
:default	匹配默認(rèn)元素。
:valid (:invalid)	根據(jù)輸入數(shù)據(jù)驗(yàn)證，匹配有效（無效）的input元素。
:in-range (out-of-range)	匹配在指定范圍之內(nèi)（之外）受限的input元素。

總結(jié)

以上是生活随笔為你收集整理的CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。