国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css選擇器總結(jié)

DirtyMind / 753人閱讀

摘要：偽類選擇器之動態(tài)偽類序號選擇器名稱說明版本動態(tài)偽類選擇器未被訪問時動態(tài)偽類選擇器已被訪問時動態(tài)偽類選擇器鼠標(biāo)以上時動態(tài)偽類選擇器訪問中跳轉(zhuǎn)頁面時動態(tài)偽類選擇器獲得焦點(diǎn)時是有順序的，其他順序可能無效，這是個坑。

1. 基本選擇器
序號 選擇器 名稱 說明 css版本
1 * 通用選擇器 選擇所有元素，包括html和body 2
2 div,span 標(biāo)簽選擇器 根據(jù)標(biāo)簽選擇元素 1
3 # id選擇器 選擇指定id元素 1
4 . 類選擇器 選擇指定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;}// 屬性值具有多值時，使用如


[lang|="en"] {color: red;}// 屬性中有"-"時使用，如

示例代碼：



hello world
// 藍(lán)框 大字 紅色

hello world
// 藍(lán)框 小字
2. 復(fù)合選擇器
序號 選擇器 名稱 說明 css版本
1 s1,s2,s3 分組選擇器 選擇多個選擇器的元素 1
2 s1 s2 后代選擇器 指定選擇器的后代元素 1
3 s1 > s2 子選擇器 指定選擇器的子元素 1
4 s1+s2 相鄰兄弟選擇器 選擇相鄰且之后的元素 1
5 s1~s2 兄弟選擇器 選擇之后的元素 2-3
3. 偽元素選擇器
序號 選擇器 名稱 說明 css版本
1 ::first-line 偽元素選擇器 塊級首行 1
2 ::first-letter 偽元素選擇器 塊級首字母 1
3 ::before 偽元素選擇器 選擇元素之前插入內(nèi)容 2
4 ::after 偽元素選擇器 選擇元素之后插入內(nèi)容 2
5 ::selection 偽元素選擇器 光標(biāo)滑動選擇內(nèi)容 2
4. 偽類選擇器之結(jié)構(gòu)性偽類選擇器
序號 選擇器 名稱 說明 css版本
1 :root 根元素選擇器 文檔根元素，一般為html 3
2 :first-child 子元素選擇器 第一個子元素 2
3 :last-child 子元素選擇器 最后一個子元素 2
4 :only-child 子元素選擇器 只有一個子元素的 2
5 :only-of-type 子元素選擇器 子元素只有一種類型的 1
6 :nth-child(n) 子元素選擇器 第n個子元素 2 
ul > li:first-child{ // li且是第一個子元素的li元素
    color:red;
}
ul > li:last-child{// li且是最后一個元素的li元素
    color: blue;
}
span:only-child{// span且在它父元素下是唯一的span元素；建議把父元素寫出來
    color: green;
}
span:only-of-type{// span且在它父元素下是唯一類型的span元素；建議把父元素寫出來
    color:green;
};
5. 偽類選擇器之UI選擇器(input標(biāo)簽用)
序號 選擇器 名稱 說明 css版本
1 :enabled 表單元素選擇器 input非disabled時 2
2 :disable 表單元素選擇器 input標(biāo)簽disabled時 1
3 :checked 表單元素選擇器 input標(biāo)簽checked時 2
4 :default 表單元素選擇器 選擇元素之后插入內(nèi)容 2
5 :valid 表單元素選擇器 選擇元素之后插入內(nèi)容 2
6 :invalid 表單元素選擇器 塊級首字母 1
7 :required 表單元素選擇器 選擇元素之前插入內(nèi)容 2
8 :optional 表單元素選擇器 選擇元素之后插入內(nèi)容 2

enabled和disable對input的大部分type都有效，除了checkbox/radio/range三個外。

checked和default不知道怎么用。貌似只在opera上有效。

valid和invalid，是表單校驗(yàn)時使用，自己手動添加valid和invalid屬性無用，必須是inp
ut使用pattern和required校驗(yàn)。

6. 偽類選擇器之動態(tài)偽類
序號 選擇器 名稱 說明 css版本
1 :link 動態(tài)偽類選擇器 未被訪問時 2
2 :visited 動態(tài)偽類選擇器 已被訪問時 1
3 :hover 動態(tài)偽類選擇器 鼠標(biāo)以上時 2
4 :active 動態(tài)偽類選擇器 訪問中跳轉(zhuǎn)頁面時 2
5 :focus 動態(tài)偽類選擇器 獲得焦點(diǎn)時 2

link/visited/hover/active是有順序的，其他順序可能無效，這是個坑。

focus用在input獲取焦點(diǎn)時使用。

7. 偽類選擇器之其他
序號 選擇器 名稱 說明 css版本
1 :not 動態(tài)偽類選擇器 反選 1
2 :empty 動態(tài)偽類選擇器 空內(nèi)容 2
3 :lang 動態(tài)偽類選擇器 包含lang元素 2
4 :target 動態(tài)偽類選擇器 url中有target時 2

示例代碼：

ul > li:not(:first-child){
    color:red;
}
ul > li:not(:last-child){
    border: 1px solid blue;
}
:empty{display:"none"}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116514.html

相關(guān)文章

  • CSS選擇器總結(jié)（分類、優(yōu)先級）

    摘要：樣式選擇器權(quán)重優(yōu)先級如下的權(quán)重為選擇器的權(quán)重為類選擇器的權(quán)重為偽類選擇器的權(quán)重為屬性選擇器的權(quán)重為標(biāo)簽選擇器的權(quán)重為偽元素選擇器的權(quán)重為通配符的權(quán)重為綜合上述權(quán)重優(yōu)先級來看，正確的優(yōu)先級排序應(yīng)該是內(nèi)聯(lián)樣式類偽類屬性選擇標(biāo)簽偽元素繼承通配符 CSS選擇器是編寫CSS代碼時的一個核心概念，選擇器定義了相應(yīng)的樣式將會影響到文檔中的哪些部分，以下是自己在學(xué)習(xí)及工作過程中對CSS選擇器的一些總結(jié)...

    hedge_hog 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • css規(guī)范總結(jié)

    摘要：通用選擇器，子選擇器和相鄰?fù)x擇器并不在這四個等級中，所以他們的權(quán)值都為，優(yōu)先級最高，萬不得已的情況下才用。規(guī)范命名風(fēng)格規(guī)范文件命名統(tǒng)一為小寫的英文字母盡量少用拼音，如。當(dāng)名字需要組合時，可以采用文件名的規(guī)范。 css樣式的權(quán)值(權(quán)重) 權(quán)值等級的定義 第一等：代表內(nèi)聯(lián)樣式，如: style=，權(quán)值為1000。第二等：代表ID選擇器，如：#content，權(quán)值為100。第三等：代表類...

    CollinPeng 評論0 收藏0

  • css選擇器總結(jié)

    摘要：今天在做項(xiàng)目的時候，發(fā)現(xiàn)選擇器有些遺忘。文本也屬于節(jié)點(diǎn)選擇匹配的所有元素，且匹配元素被相關(guān)指向否定偽類選擇器。相鄰兄弟選擇器。匹配的元素，該元素位于后面相鄰位置通用兄弟選擇器。 今天在做項(xiàng)目的時候，發(fā)現(xiàn)選擇器有些遺忘。特寫此文章來加深記憶，也方便自己日后回顧。 通用選擇器 * //有時候?yàn)榱藶g覽器內(nèi)置樣式，可能會這樣寫。 //但一般不推薦！！！ *{ margin:0;padding:...

    Bowman_han 評論0 收藏0

發(fā)表評論

0條評論

DirtyMind

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<