資訊專(zhuān)欄INFORMATION COLUMN
摘要：偽類(lèi)選擇器之動(dòng)態(tài)偽類(lèi)序號(hào)選擇器名稱(chēng)說(shuō)明版本動(dòng)態(tài)偽類(lèi)選擇器未被訪問(wèn)時(shí)動(dòng)態(tài)偽類(lèi)選擇器已被訪問(wèn)時(shí)動(dòng)態(tài)偽類(lèi)選擇器鼠標(biāo)以上時(shí)動(dòng)態(tài)偽類(lèi)選擇器訪問(wèn)中跳轉(zhuǎn)頁(yè)面時(shí)動(dòng)態(tài)偽類(lèi)選擇器獲得焦點(diǎn)時(shí)是有順序的，其他順序可能無(wú)效，這是個(gè)坑。
1. 基本選擇器
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | * | 通用選擇器 | 選擇所有元素，包括html和body | 2 |
| 2 | div,span | 標(biāo)簽選擇器 | 根據(jù)標(biāo)簽選擇元素 | 1 |
| 3 | # | id選擇器 | 選擇指定id元素 | 1 |
| 4 | . | 類(lèi)選擇器 | 選擇指定class | 1 |
| 5 | [attr] | 屬性選擇器 | 根據(jù)元素屬性去選擇 | 2-3 |
屬性選擇器的幾種用法
[href] {color: red;}
[type="password"] {color: red;}
[href^="http"] {color: red;}
[href$=".cn"] {color: red;}
[href*="baidu"] {color: red;}
[class~="def"] {color: red;}// 屬性值具有多值時(shí)，使用如
[lang|="en"] {color: red;}// 屬性中有"-"時(shí)使用，如
示例代碼：
2. 復(fù)合選擇器hello world
// 藍(lán)框 大字 紅色hello world
// 藍(lán)框 小字
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | s1,s2,s3 | 分組選擇器 | 選擇多個(gè)選擇器的元素 | 1 |
| 2 | s1 s2 | 后代選擇器 | 指定選擇器的后代元素 | 1 |
| 3 | s1 > s2 | 子選擇器 | 指定選擇器的子元素 | 1 |
| 4 | s1+s2 | 相鄰兄弟選擇器 | 選擇相鄰且之后的元素 | 1 |
| 5 | s1~s2 | 兄弟選擇器 | 選擇之后的元素 | 2-3 |
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | ::first-line | 偽元素選擇器 | 塊級(jí)首行 | 1 |
| 2 | ::first-letter | 偽元素選擇器 | 塊級(jí)首字母 | 1 |
| 3 | ::before | 偽元素選擇器 | 選擇元素之前插入內(nèi)容 | 2 |
| 4 | ::after | 偽元素選擇器 | 選擇元素之后插入內(nèi)容 | 2 |
| 5 | ::selection | 偽元素選擇器 | 光標(biāo)滑動(dòng)選擇內(nèi)容 | 2 |
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | :root | 根元素選擇器 | 文檔根元素，一般為html | 3 |
| 2 | :first-child | 子元素選擇器 | 第一個(gè)子元素 | 2 |
| 3 | :last-child | 子元素選擇器 | 最后一個(gè)子元素 | 2 |
| 4 | :only-child | 子元素選擇器 | 只有一個(gè)子元素的 | 2 |
| 5 | :only-of-type | 子元素選擇器 | 子元素只有一種類(lèi)型的 | 1 |
| 6 | :nth-child(n) | 子元素選擇器 | 第n個(gè)子元素 | 2 |
ul > li:first-child{ // li且是第一個(gè)子元素的li元素
color:red;
}
ul > li:last-child{// li且是最后一個(gè)元素的li元素
color: blue;
}
span:only-child{// span且在它父元素下是唯一的span元素；建議把父元素寫(xiě)出來(lái)
color: green;
}
span:only-of-type{// span且在它父元素下是唯一類(lèi)型的span元素；建議把父元素寫(xiě)出來(lái)
color:green;
};
5. 偽類(lèi)選擇器之UI選擇器(input標(biāo)簽用)
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | :enabled | 表單元素選擇器 | input非disabled時(shí) | 2 |
| 2 | :disable | 表單元素選擇器 | input標(biāo)簽disabled時(shí) | 1 |
| 3 | :checked | 表單元素選擇器 | input標(biāo)簽checked時(shí) | 2 |
| 4 | :default | 表單元素選擇器 | 選擇元素之后插入內(nèi)容 | 2 |
| 5 | :valid | 表單元素選擇器 | 選擇元素之后插入內(nèi)容 | 2 |
| 6 | :invalid | 表單元素選擇器 | 塊級(jí)首字母 | 1 |
| 7 | :required | 表單元素選擇器 | 選擇元素之前插入內(nèi)容 | 2 |
| 8 | :optional | 表單元素選擇器 | 選擇元素之后插入內(nèi)容 | 2 |
enabled和disable對(duì)input的大部分type都有效，除了checkbox/radio/range三個(gè)外。
checked和default不知道怎么用。貌似只在opera上有效。
valid和invalid，是表單校驗(yàn)時(shí)使用，自己手動(dòng)添加valid和invalid屬性無(wú)用，必須是inp
ut使用pattern和required校驗(yàn)。
| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | :link | 動(dòng)態(tài)偽類(lèi)選擇器 | 未被訪問(wèn)時(shí) | 2 |
| 2 | :visited | 動(dòng)態(tài)偽類(lèi)選擇器 | 已被訪問(wèn)時(shí) | 1 |
| 3 | :hover | 動(dòng)態(tài)偽類(lèi)選擇器 | 鼠標(biāo)以上時(shí) | 2 |
| 4 | :active | 動(dòng)態(tài)偽類(lèi)選擇器 | 訪問(wèn)中跳轉(zhuǎn)頁(yè)面時(shí) | 2 |
| 5 | :focus | 動(dòng)態(tài)偽類(lèi)選擇器 | 獲得焦點(diǎn)時(shí) | 2 |
link/visited/hover/active是有順序的，其他順序可能無(wú)效，這是個(gè)坑。
focus用在input獲取焦點(diǎn)時(shí)使用。
7. 偽類(lèi)選擇器之其他| 序號(hào) | 選擇器 | 名稱(chēng) | 說(shuō)明 | css版本 |
|---|---|---|---|---|
| 1 | :not | 動(dòng)態(tài)偽類(lèi)選擇器 | 反選 | 1 |
| 2 | :empty | 動(dòng)態(tài)偽類(lèi)選擇器 | 空內(nèi)容 | 2 |
| 3 | :lang | 動(dòng)態(tài)偽類(lèi)選擇器 | 包含lang元素 | 2 |
| 4 | :target | 動(dòng)態(tài)偽類(lèi)選擇器 | url中有target時(shí) | 2 |
示例代碼：
ul > li:not(:first-child){
color:red;
}
ul > li:not(:last-child){
border: 1px solid blue;
}
:empty{display:"none"}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116514.html
摘要：樣式選擇器權(quán)重優(yōu)先級(jí)如下的權(quán)重為選擇器的權(quán)重為類(lèi)選擇器的權(quán)重為偽類(lèi)選擇器的權(quán)重為屬性選擇器的權(quán)重為標(biāo)簽選擇器的權(quán)重為偽元素選擇器的權(quán)重為通配符的權(quán)重為綜合上述權(quán)重優(yōu)先級(jí)來(lái)看，正確的優(yōu)先級(jí)排序應(yīng)該是內(nèi)聯(lián)樣式類(lèi)偽類(lèi)屬性選擇標(biāo)簽偽元素繼承通配符 CSS選擇器是編寫(xiě)CSS代碼時(shí)的一個(gè)核心概念，選擇器定義了相應(yīng)的樣式將會(huì)影響到文檔中的哪些部分，以下是自己在學(xué)習(xí)及工作過(guò)程中對(duì)CSS選擇器的一些總結(jié)...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：通用選擇器，子選擇器和相鄰?fù)x擇器并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為，優(yōu)先級(jí)最高，萬(wàn)不得已的情況下才用。規(guī)范命名風(fēng)格規(guī)范文件命名統(tǒng)一為小寫(xiě)的英文字母盡量少用拼音，如。當(dāng)名字需要組合時(shí)，可以采用文件名的規(guī)范。 css樣式的權(quán)值(權(quán)重) 權(quán)值等級(jí)的定義 第一等：代表內(nèi)聯(lián)樣式，如: style=，權(quán)值為1000。第二等：代表ID選擇器，如：#content，權(quán)值為100。第三等：代表類(lèi)...
摘要：今天在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)選擇器有些遺忘。文本也屬于節(jié)點(diǎn)選擇匹配的所有元素，且匹配元素被相關(guān)指向否定偽類(lèi)選擇器。相鄰兄弟選擇器。匹配的元素，該元素位于后面相鄰位置通用兄弟選擇器。 今天在做項(xiàng)目的時(shí)候，發(fā)現(xiàn)選擇器有些遺忘。特寫(xiě)此文章來(lái)加深記憶，也方便自己日后回顧。 通用選擇器 * //有時(shí)候?yàn)榱藶g覽器內(nèi)置樣式，可能會(huì)這樣寫(xiě)。 //但一般不推薦！??！ *{ margin:0;padding:...
閱讀 1637·2021-11-25 09:43
閱讀 2546·2019-08-30 15:54
閱讀 3015·2019-08-30 15:53
閱讀 1155·2019-08-30 15:53
閱讀 799·2019-08-30 15:52
閱讀 2593·2019-08-26 13:36
閱讀 869·2019-08-26 12:16
閱讀 1288·2019-08-26 12:13
