前端 之 CSS 選擇器參考手冊

CSS 選擇器參考手冊

http://www.w3school.com.cn/cssref/css_selectors.asp

我們會定期對 W3School 的 CSS 參考手冊進(jìn)行瀏覽器測試鳄逾。

CSS3 選擇器

在 CSS 中锰镀,選擇器是一種模式,用于選擇需要添加樣式的元素侦讨。

"CSS" 列指示該屬性是在哪個 CSS 版本中定義的吟策。(CSS1儒士、CSS2 還是 CSS3。)

選擇器例子例子描述CSS

.class.intro選擇 class="intro" 的所有元素檩坚。1

#id#firstname選擇 id="firstname" 的所有元素着撩。1

**選擇所有元素。2

elementp選擇所有

元素匾委。1

element,elementdiv,p選擇所有

元素和所有

元素拖叙。1

element?elementdiv p選擇

元素內(nèi)部的所有

元素。1

element>elementdiv>p選擇父元素為

元素的所有

元素赂乐。2

element+elementdiv+p選擇緊接在

元素之后的所有

元素薯鳍。2

[attribute][target]選擇帶有 target 屬性所有元素。2

[attribute=value][target=_blank]選擇 target="_blank" 的所有元素挨措。2

[attribute~=value][title~=flower]選擇 title 屬性包含單詞 "flower" 的所有元素挖滤。2

[attribute|=value][lang|=en]選擇 lang 屬性值以 "en" 開頭的所有元素。2

:linka:link選擇所有未被訪問的鏈接浅役。1

:visiteda:visited選擇所有已被訪問的鏈接斩松。1

:activea:active選擇活動鏈接。1

:hovera:hover選擇鼠標(biāo)指針位于其上的鏈接觉既。1

:focusinput:focus選擇獲得焦點(diǎn)的 input 元素砸民。2

:first-letterp:first-letter選擇每個

元素的首字母。1

:first-linep:first-line選擇每個

元素的首行。1

:first-childp:first-child選擇屬于父元素的第一個子元素的每個

元素岭参。2

:beforep:before在每個

元素的內(nèi)容之前插入內(nèi)容反惕。2

:afterp:after在每個

元素的內(nèi)容之后插入內(nèi)容。2

:lang(language)p:lang(it)選擇帶有以 "it" 開頭的 lang 屬性值的每個

元素演侯。2

element1~element2p~ul選擇前面有

元素的每個

    元素姿染。3

[attribute^=value]a[src^="https"]選擇其 src 屬性值以 "https" 開頭的每個 元素。3

[attribute$=value]a[src$=".pdf"]選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 元素秒际。3

[attribute*=value]a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個 元素悬赏。3

:first-of-typep:first-of-type選擇屬于其父元素的首個

元素的每個

元素。3

:last-of-typep:last-of-type選擇屬于其父元素的最后

元素的每個

元素娄徊。3

:only-of-typep:only-of-type選擇屬于其父元素唯一的

元素的每個

元素闽颇。3

:only-childp:only-child選擇屬于其父元素的唯一子元素的每個

元素。3

:nth-child(n)p:nth-child(2)選擇屬于其父元素的第二個子元素的每個

元素寄锐。3

:nth-last-child(n)p:nth-last-child(2)同上兵多,從最后一個子元素開始計數(shù)。3

:nth-of-type(n)p:nth-of-type(2)選擇屬于其父元素第二個

元素的每個

元素橄仆。3

:nth-last-of-type(n)p:nth-last-of-type(2)同上剩膘,但是從最后一個子元素開始計數(shù)。3

:last-childp:last-child選擇屬于其父元素最后一個子元素每個

元素盆顾。3

:root:root選擇文檔的根元素怠褐。3

:emptyp:empty選擇沒有子元素的每個

元素(包括文本節(jié)點(diǎn))。3

:target#news:target選擇當(dāng)前活動的 #news 元素您宪。3

:enabledinput:enabled選擇每個啟用的 元素奈懒。3

:disabledinput:disabled選擇每個禁用的 元素3

:checkedinput:checked選擇每個被選中的 元素。3

:not(selector):not(p)選擇非

元素的每個元素宪巨。3

::selection::selection選擇被用戶選取的元素部分磷杏。3

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末揖铜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子天吓,更是在濱河造成了極大的恐慌,老刑警劉巖龄寞,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汰规,死亡現(xiàn)場離奇詭異,居然都是意外死亡物邑,警方通過查閱死者的電腦和手機(jī)滔金,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門茂嗓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來餐茵,“玉大人,你說我怎么就攤上這事述吸》拮澹” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵道批,是天一觀的道長入撒。 經(jīng)常有香客問我,道長茅逮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任氮唯,我火速辦了婚禮姨伟,結(jié)果婚禮上惩琉,老公的妹妹穿的比我還像新娘夺荒。我一直安慰自己,他們只是感情好技扼,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著窍箍,像睡著了一般丽旅。 火紅的嫁衣襯著肌膚如雪椰棘。 梳的紋絲不亂的頭發(fā)上榄笙,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音茅撞,去河邊找鬼巨朦。 笑死剑令,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吁津。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼腺毫,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了潮酒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤扎狱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后淤击,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡污抬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年绳军,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片门驾。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖奶是,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情聂沙,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布蛔屹,位于F島的核電站豁生,受9級特大地震影響兔毒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜育叁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望豪嗽。 院中可真熱鬧,春花似錦龟梦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽荞怒。三九已至,卻和暖如春褐桌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荧嵌。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工挖帘, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留完丽,地道東北人拇舀。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓蜻底,卻偏偏與公主長得像,于是被迫代替她去往敵國和親薄辅。 傳聞我的和親對象是個殘疾皇子要拂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

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

  • 一蔚润、基本選擇器 回顧選擇器 通配符選擇器、元素選擇器嫡纠、類選擇器烦租、ID選擇器除盏、后代選擇器 新增基本選擇器 子元素選擇...
    越IT閱讀 1,165評論 0 3
  • <<<在 CSS 中,選擇器是一種模式者蠕,用于選擇需要添加樣式的元素。 "CSS" 列指示該屬性是在哪個 CSS 版...
    松雪寶寶閱讀 592評論 0 1
  • 1.class 和 id 的使用場景? class:類選擇器锌杀,一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上,...
    饑人谷_兔子君閱讀 1,197評論 0 0
  • 1.class 和 id 的使用場景? 兩者都能選取DOM節(jié)點(diǎn)并給DOM節(jié)點(diǎn)添加樣式糕再,但是W3C標(biāo)準(zhǔn)里規(guī)定頁面中只...
    饑人谷_米彌輪閱讀 395評論 0 1
  • class 和 id 的使用場景? 每個標(biāo)簽只能設(shè)置一個id玉转,此id在頁面中只能出現(xiàn)一次。id多用于頁面分塊時塊級...
    cross_王閱讀 441評論 0 0