css選擇器規(guī)則

1. 選擇器分類

簡單選擇器(Simple selectors):通過元素類型侈咕、class 或 id 匹配一個或多個元素耀销。
屬性選擇器(Attribute selectors):通過 屬性 / 屬性值 匹配一個或多個元素铲汪。
偽類(Pseudo-classes):匹配處于確定狀態(tài)的一個或多個元素,比如被鼠標(biāo)指針懸停的元素狰住,或當(dāng)前被選中或未選中的復(fù)選框催植,或元素是DOM樹中一父節(jié)點的第一個子節(jié)點。
偽元素(Pseudo-elements):匹配處于相關(guān)的確定位置的一個或多個元素伦忠,例如每個段落的第一個字稿辙,或者某個元素之前生成的內(nèi)容。
組合器(Combinators):這里不僅僅是選擇器本身赋咽,還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法芥备。例如萌壳,你可以只選擇divs的直系子節(jié)點的段落日月,或者直接跟在headings后面的段落爱咬。
多用選擇器(Multiple selectors):這些也不是單獨的選擇器;這個思路是將以逗號分隔開的多個選擇器放在一個CSS規(guī)則下面精拟, 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素蜂绎。

2. 簡單選擇器

類型選擇器(又名元素選擇器): 選擇器名和指定的HTML元素名的不區(qū)分大小寫的匹配。

元素名 {屬性名:屬性值;}

類選擇器: 由一個點“.”以及類后面的類名組成怪瓶。

.類名 {屬性名:屬性值;}

ID 選擇器: 由哈希/磅符號 (#)組成洗贰,后面是給定元素的ID名稱( ID 名稱具有唯一性)。

#ID名 {屬性名:屬性值;}

通用選擇器: (*)星號许布,表示選擇頁面所有元素绎晃。

* {屬性名:屬性值;}

3. 屬性選擇器

屬性選擇器是一種特殊類型的選擇器箕昭,它根據(jù)元素的 屬性和屬性值來匹配元素。

通用語法: [屬性名:屬性值]

分類: 存在和值屬性選擇器 和 子串值屬性選擇器泌霍。

3.1 存在和值(Presence and value)屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值:

[attr]:該選擇器選擇包含 attr 屬性的所有元素述召,不論 attr 的值為何螟左。
[attr=val]:該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素议泵。
[attr~=val]:該選擇器僅選擇 attr 屬性的值(以空格間隔出多個值)中有包含 val 值的所有元素唆铐,比如位于被空格分隔的多個類(class)中的一個類遍愿。

3.2 子串值(Substring value)屬性選擇器

這種情況的屬性選擇器也被稱為“偽正則選擇器”沼填,因為它們提供類似 regular expression 的靈活匹配方式(但請注意,這些選擇器并不是真正的正則表達(dá)式):

[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素(-用來處理語言編碼)岩饼。
[attr^=val] : 選擇attr屬性的值以val開頭(包括 val)的元素籍茧。
[attr$=val] : 選擇attr屬性的值以val結(jié)尾(包括 val)的元素却邓。
[attr*=val] : 選擇attr屬性的值中包含字符串 val 的元素。

4. 偽選擇器

偽選擇器 —— 這些不選擇實際元素,而是元素的某些部分简十,或僅在某些上下文中的元素檬某。它們有兩種主要類型 - 偽類和偽元素。

4.1 偽類(Pseudo-class)

CSS偽類是添加到選擇器的關(guān)鍵字螟蝙,指定要選擇的元素的特殊狀態(tài)恢恼。
語法:selector:pseudo-class { property: value; }
例如:a:visited {} a:hover {} a:active {} a:focus {}

4.2 偽元素

pseudo classes (偽類)一樣, 偽元素添加到選擇器胰默,但不是描述特殊狀態(tài)场斑,它們允許您為元素的某些部分設(shè)置樣式。
語法 :selector::pseudo-element { property: value; }
所有偽元素:

::after                 元素的最后一個子元素
::before                元素的第一個子元素
::first-letter  (塊級元素)第一行的第一個字母
::first-line      (塊級元素)的第一行
::selection        用于文檔中被用戶高亮的部分(比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分)牵署。

5. 組合器和多個選擇器

5.1 組合器

組合器.png

5.2 同一規(guī)則集上的多個選擇器

語法 selector1,selector2 {property:value;}

6. CSS3中的一些選擇器

6.1 CSS3 同級元素通用選擇器

css3通用選擇器.png

6.2 CSS3 屬性選擇器

css3屬性選擇器.png

6.3 CSS 3中與用戶界面有關(guān)的偽類

css3界面相關(guān)偽類.png

6.4 CSS 3中的結(jié)構(gòu)性偽類

CSS3中的結(jié)構(gòu)性偽類.png

7. 參考鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市奴迅,隨后出現(xiàn)的幾起案子青责,更是在濱河造成了極大的恐慌,老刑警劉巖取具,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件脖隶,死亡現(xiàn)場離奇詭異,居然都是意外死亡暇检,警方通過查閱死者的電腦和手機产阱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來块仆,“玉大人构蹬,你說我怎么就攤上這事』诰荩” “怎么了怎燥?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蜜暑。 經(jīng)常有香客問我,道長策肝,這世上最難降的妖魔是什么肛捍? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮之众,結(jié)果婚禮上拙毫,老公的妹妹穿的比我還像新娘。我一直安慰自己棺禾,他們只是感情好缀蹄,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般缺前。 火紅的嫁衣襯著肌膚如雪蛀醉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天衅码,我揣著相機與錄音拯刁,去河邊找鬼。 笑死逝段,一個胖子當(dāng)著我的面吹牛垛玻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播奶躯,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼帚桩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嘹黔?” 一聲冷哼從身側(cè)響起账嚎,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎参淹,沒想到半個月后醉锄,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡浙值,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年恳不,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片开呐。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡烟勋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出筐付,到底是詐尸還是另有隱情卵惦,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布瓦戚,位于F島的核電站沮尿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏较解。R本人自食惡果不足惜畜疾,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望印衔。 院中可真熱鬧啡捶,春花似錦、人聲如沸奸焙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至了赌,卻和暖如春墨榄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背揍拆。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工渠概, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嫂拴。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓播揪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親筒狠。 傳聞我的和親對象是個殘疾皇子猪狈,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說辩恼,文檔的元素就是最基本的選擇器雇庙。如果設(shè)置 H...
    饑人谷_小侯閱讀 867評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,761評論 1 92
  • id選擇器 先看看class屬性和id屬性的區(qū)別吧灶伊。 id id用于定義唯一的標(biāo)識符疆前,它是一個全局屬性,在整個HT...
    知更鳥_b4d4閱讀 428評論 0 0
  • 分類 選擇器可以被分為以下類別: 簡單選擇器(Simple selectors):通過元素類型聘萨、class或 id...
    jtsky閱讀 879評論 0 1
  • 不知道哪一天竹椒,頭腦里有很強烈的欲望,就是每天都要放飛自己(天天起飛)米辐,覺得青春只有這十幾年胸完,好多人會懷緬青春...
    付思遠(yuǎn)閱讀 260評論 0 0