CSS中的屬性選擇符和結(jié)構(gòu)化偽類
segmentfault 發(fā)布時間：2015-08-01 18:43:35 作者：dopppler 
我要評論
我要評論這篇文章主要介紹了CSS中的屬性選擇符和結(jié)構(gòu)化偽類,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
屬性選擇符
屬性名選擇符
格式：標(biāo)簽名[屬性名]
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- img[title] {border:2px solid blue;}
提示：一般來說，人們經(jīng)常給 alt 和 title 屬性設(shè)定相同的值。 alt 屬性中的文本會在圖片因故未能加載時顯示，或者由屏幕閱讀器朗讀出來。而 title 屬性會在用戶鼠標(biāo)移動到圖片上時，顯示一個包含相應(yīng)文本的提示。
屬性值選擇符
格式：[屬性名="屬性值"]
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- img[title="red flower"] {border:4px solid green;}
說明：在 HTML5 中， 屬性值的引號可加可不加，在此為了清楚起見，建議添加。
結(jié)構(gòu)化偽類
結(jié)構(gòu)化偽類可以根據(jù)標(biāo)記的結(jié)構(gòu)應(yīng)用樣式，比如根據(jù)某元素的父元素或前面的同胞元素是什么。
first-child和:last-child
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
- e:first-child
- e:last-child
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- ol.results li:first-child {color:blue;}
nth-child
格式：
CSS Code復(fù)制內(nèi)容到剪貼板
- e:nth-child(n)
示例：
CSS Code復(fù)制內(nèi)容到剪貼板
- li:nth-child(3)
說明：e 表示元素名，n 表示一個數(shù)值（也可以使用 odd 或 even）
相關(guān)文章
CSS 選擇器在實踐中是非常常用的，無論是在寫樣式上或是在 JS 中選擇 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作組繼續(xù)為選擇器標(biāo)準(zhǔn)添加了更豐富的選擇器。需2018-12-24- 這篇文章主要介紹了css選擇器設(shè)置標(biāo)簽樣式的實例代碼,需要的朋友可以參考下2018-11-22
- CSS屬性選擇器非常神奇，它們可以幫你避免添加數(shù)不勝數(shù)的類名，從另一方面來指出你代碼里的一些問題。接下來通過本文給大家介紹使用CSS屬性選擇器來拼接HTML的DNA的方法，2018-11-02
CSS first-chjld偽類屬性匹配一個序列的第一個元素
:first-child偽類用于匹配一個序列的第一個元素，主要用它來實現(xiàn)一個序列的第一個元素或最后一個元素的上（下）邊框，下面有個不錯的示例，感興趣的朋友不要錯過2014-01-14css對邊框的屬性控制和鏈接的偽類選擇器-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
原文：http://jorux.com/archives/property-3-if-you-love-css/ 本篇主要介紹css對邊框(border)的屬性控制和鏈接(link)的偽類選擇器. 邊框(border): css控制的邊框?qū)?/div> 2008-10-17這篇文章主要介紹了css選擇器四大類：基本、組合、屬性、偽類的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-14最新評論
