CSS 選擇器演示 前端開發倉庫

點擊左側列表中的選擇器,即可在右側中預覽到選擇器匹配到的內容。

如果沒有任何匹配,說明所使用的瀏覽器不支持該選擇器。?( ′▽`)

元素選擇器
*
通配選擇器

匹配所有元素。

li
類型選擇器

匹配標簽為 li 的元素。

#catalogue
id 選擇器

匹配 id 屬性值等于 catalogue 的元素。

.list
class 選擇器

匹配 class 屬性值包含 list 的元素。

關系選擇器
#catalogue h3
后代選擇器

匹配 #catalogue 元素內所有的 h3 元素。

#catalogue > h3
子元素選擇器

匹配 #catalogue 元素子級的 h3 元素。

* 不支持:IE6

h1 + h2
相鄰選擇器

匹配 h1 元素之后緊跟的 h2 元素。

* 不支持:IE6

h1 ~ h2
兄弟選擇

匹配 h1 元素之后所有的 h2 元素。

* 不支持:IE6

偽類選擇器
h3:first-child

匹配同輩的所有元素中,第一個元素并且是 h3 的元素。

* 不支持:IE6

h3:last-child

匹配同輩的所有元素中,最后一個元素并且是 h3 的元素。

* 不支持:IE6-8

h3:first-of-type

匹配同輩的 h3 元素中,第一個 h3 元素。

* 不支持:IE6-8

h3:last-of-type

匹配同輩的 h3 元素中,最后一個 h3 元素。

* 不支持:IE6-8

h3:nth-child(2n)

匹配同輩的所有元素中,第 2n 個元素并且是 h3 的元素。

* 不支持:IE6-8

h3:nth-last-child(2n)

匹配同輩的所有元素中,倒數第 2n 個元素并且是 h3 的元素。

* 不支持:IE6-8

h3:nth-of-type(2n)

匹配同輩的 h3 元素中,第 2n 個 h3 元素。

* 不支持:IE6-8

h3:nth-last-of-type(2n)

匹配同輩的 h3 元素中,倒數第 2n 個 h3 元素。

* 不支持:IE6-8

.list dt:only-child

匹配同輩的所有元素中,只有一個元素并且是 dt 的元素。

* 不支持:IE6-8

.list dt:only-of-type

匹配同輩的 dt 元素中,只有一個 dt 元素時的 dt 元素。

* 不支持:IE6-8

.list:lang(zh)

匹配 lang 屬性值等于 zh 的 .list 元素

* 不支持:IE6-7

ol:not(.list)

匹配 ol 元素中,不包含 .list 選擇器規則的元素。

* 不支持:IE6-8

h3:empty

匹配不包含任何元素及內容的 h3 元素。

* 不支持:IE6-8

div:target

匹配 URL 井號(#)部分指向的 div 元素。

* 不支持:IE6-8

E:link

a 元素的鏈接地址在未被訪問前的樣式。

* 不進行演示

E:visited

a 元素的鏈接地址已被訪問過的樣式。

* 不進行演示

E:hover

鼠標懸停在 E 元素上時的樣式

* IE6以下 只支持 a 元素的 hover 樣式

* 不進行演示

E:active

E 元素在被激活(在鼠標點擊與釋放之間發生的事件)時的樣式。

* IE7以下 只支持 a 元素的 active 樣式

* 不進行演示

E:focus

E 元素在獲得焦點時的樣式。

* 不支持:IE6-7

* 不進行演示

E:root

匹配 E 元素在文檔的根元素,在 HTML 中,根元素永遠是 HTML。

* 不支持:IE6-8

* 不進行演示

E:checked

匹配選中狀態的 E 元素。(用于 input type 為 radio 與 checkbox)

* 不支持:IE6-8

* 不進行演示

E:enabled

匹配可以正常使用的 E 元素。

* 不支持:IE6-8

* 不進行演示

E:disabled

匹配被禁止使用的 E 元素。(disabled="disabled")

* 不支持:IE6-8

* 不進行演示

偽元素選擇器
.article:first-letter

設置 .talk 元素第一個字符的樣式。

例:右側首字大號字

* IE6 下選擇符與花括號之間需有空格或換行

.talk:first-line

設置 .talk 元素第一行的樣式。

例:右側首行有淺灰色背景色

* IE6 下選擇符與花括號之間需有空格或換行

.talk:before

設置 .talk 元素前的內容及樣式。(與 content 屬性一起使用)

例:右側的<p class="talk">有深灰色背景色

* 不支持:IE6-7

.talk:after

設置 .talk 元素后的內容及樣式。(與 content 屬性一起使用)

例:右側的</p>有深灰色背景色

* 不支持:IE6-7

.talk::selection

設置 .talk 元素被選擇時的顏色。

例:用鼠標選中右側 .talk 內的文字試試

* 不支持:IE6-8

屬性選擇器
a[class]

匹配具有 class 屬性值的 a 的元素。

* 不支持:IE6

a[target="_blank"]

匹配 target 屬性值等于 _blank 的 a 元素。

* 不支持:IE6

a[href^="https"]

匹配 href 屬性值以 https 開頭的 a 元素。

* 不支持:IE6

a[href$=".jpg"]

匹配 href 屬性值以 .jpg 結尾的 a 元素。

* 不支持:IE6

a[href*="baike"]

匹配 href 屬性值包含 baike 的 a 元素。

* 不支持:IE6

a[class|="abc"]

匹配 class 屬性值以 abc 開頭并跟著連接符“-”分割字符串 的 a 元素。例:

color-
color-red
color-green-blue

* 不支持:IE6

a[class~="abc"]

匹配 class 屬性值以空格為分隔符,其中有一個等于 abc 的 a 元素。

* 不支持:IE6

盜墓筆記

目錄

七星魯王

  1. 第一章 血尸
  2. 第二章 五十年后
  3. 第三章 瓜子廟

怒海潛沙

  1. 第一章 蛇眉銅魚
  2. 第二章 雙層墓墻
  3. 第三章 大風暴

云頂天宮

  1. 第一章 五圣雪山
蛇沼鬼城
第一章 三叔的醒來
第二章 往事不堪回首
謎海歸巢

陰山古樓

邛籠石影

大結局

試讀

七星魯王 第一章 血尸

50年前,長沙鏢子嶺。

四個土夫子正蹲在一個土丘上,所有人都不說話,直勾勾地盯著地上那把洛陽鏟

鏟子頭上帶著剛從地下帶出的舊土,離奇的是,這一壞土正不停地向外滲著鮮紅的液體,就像剛剛在血液里蘸過一樣。

“這下子麻煩大嘍。”老煙頭把他的旱煙在地上敲了敲,接著道,“下面是個血尸嘎,弄不好我們這點兒當當,都要撂在下面噢。”

“下不下去喃?要得要不得,一句話,莫七里八里的!”獨眼的小伙子說,“你說你個老人家腿腳不方便,就莫下去了,我和我弟兩個下去,管他什么東西,直接給他來一梭子。”

老煙頭不怒反笑,對邊上的一個大胡子說:“你屋里二伢子海式撩天的,指不定什么時候就給翻蓋子了,你得多教育教育,咱這買賣,不是有只匣子炮就能喔荷西天。”

那大胡子瞪了那年輕人一眼:“你崽子,怎么這么跟老太爺講話,老太爺淘土的時候你他媽的還在你娘肚子里吃屎咧。”

“我咋說……說錯了,老祖宗不說了嘛,那血尸就是個好東西,下面寶貝肯定不少,不下去,走嘎一爐鍋湯。”

“你還敢頂嘴!”大胡子舉手就打,被老煙頭用煙槍擋了回去。

“打不得,你做伢那時候不還是一樣,這叫上梁不正下梁歪!”

那獨眼的小伙子看他老爸被數落了,低下頭偷笑,老煙頭咳嗽了一聲,又敲了那獨眼的少年一記頭棍:“你笑個啥?碰到血尸,可大可小,上次你二公就是在洛陽挖到這東西,結果現在還瘋瘋癲癲的,都不知道著了什么道。等一下我先下去,你跟在我后面,二伢子你帶個土耗子殿后,三伢子你就別下去了,四個人都下去,想退都來不及退,你就拉著土耗子的尾巴,我們在里面一吆喝你就把東西拉出來。”

四川快乐12开奖时间