css選擇器種類
一、id選擇器
#id{ color:red; }
二、類選擇器、屬性選擇器、偽類選擇器
1、類選擇器
.class{ color:black; }
?
2、屬性選擇器
[text]{ color:white; } [text:text]{ color:white; } p[text:text]{ color:white; }
3、偽類選擇器
:link 向未被訪問(wèn)的超鏈接添加樣式
:visited ? 向已被訪問(wèn)的超鏈接添加樣式
:active 向被激活的元素添加樣式
:hover 當(dāng)鼠標(biāo)懸停至元素上方是,向該元素添加樣式
:focus 當(dāng)元素獲取焦點(diǎn)時(shí),向該元素添加樣式
345
p:foucs{ color:blue; }
三、元素選擇器、偽類選擇器
1、元素選擇器
345
p{ color:pink; }
2、偽元素選擇器
:first-letter 向文本的第一個(gè)字母添加特殊樣式。
:first-line 向文本的首行添加特殊樣式。
:before ??在元素之前添加內(nèi)容。
:after 在元素之后添加內(nèi)容。
345
//"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。 p:first-line { color:#ff0000; }
四、通配符選擇器、子類選擇器、后代選擇器、相鄰兄弟選擇器、分組選擇器
1、通配符選擇器
*{ /*選擇頁(yè)面上的所有元素*/ color:pink; } #te*{ /*選擇id為te元素下的所有元素*/ color:pink; }345
2、子類選擇器
#te > p{ /*選擇id為te元素下的所有的直接子類p元素*/ color:pink; }345
?
3、后代選擇器
#te p{ /*選擇id為te的元素下的所有p元素*/ color:pink; }345
?
4、相鄰兄弟選擇器
p + input{ /*選擇緊接在 p 元素后出現(xiàn)的,p 和 input 元素?fù)碛泄餐母冈?/span>*/ color:pink; }345
?
5、選擇器分組
p,input{ /*選擇所有的p和input元素*/ color:pink; }345
?
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/1212.html
摘要:常用于鏈接描點(diǎn)上用戶行為選擇器選擇匹配的元素,且匹配元素被激活。,選擇的是奇數(shù)項(xiàng),而使用選擇的卻是偶數(shù)項(xiàng)否定偽類選擇器選擇器功能描述匹配所有除元素外的元素屬性選擇器語(yǔ)法選擇器功能描述用于選取帶有指定屬性的元素。 CSS選擇器概述 一.CSS3 選擇器分類 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.選擇器語(yǔ)法...
摘要:基礎(chǔ)教程簡(jiǎn)介概述指層疊樣式表決定元素如何顯示內(nèi)容與樣式分離多個(gè)樣式定義可層疊為一層疊次序?yàn)g覽器缺省設(shè)置外部樣式表內(nèi)部樣式表位于標(biāo)簽內(nèi)部?jī)?nèi)聯(lián)樣式在元素內(nèi)部基本語(yǔ)法語(yǔ)法結(jié)構(gòu)高級(jí)語(yǔ)法選擇器的分組繼承繼承中的屬性重寫從中繼承的屬 CSS基礎(chǔ)教程 CSS簡(jiǎn)介 CSS概述 CSS指層疊樣式表(Cascading Style Sheets) 決定HTML元素如何顯示 內(nèi)容與樣式分離 多個(gè)樣式...
摘要:的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過(guò)渡變換動(dòng)畫(huà)下面分別說(shuō)一說(shuō)以上六類都有哪些內(nèi)容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設(shè)置樣式為屬性的元素設(shè)置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過(guò)渡 5.CSS3變換 ...
閱讀 2913·2021-09-22 15:54
閱讀 1901·2019-08-30 15:53
閱讀 2256·2019-08-29 16:33
閱讀 1430·2019-08-29 12:29
閱讀 1403·2019-08-26 11:41
閱讀 2382·2019-08-26 11:34
閱讀 2970·2019-08-23 16:12
閱讀 1432·2019-08-23 15:56