請在后臺配置參數,參數名稱:topads
前端開發 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

常用CSS選擇符使用大全

CSS HTML我幫您 1年前  784次瀏覽
選擇符,顧名思義,用于從XHTML文檔中選擇元素。選擇符有很多種,各有其不同的具體性(specificity),可以確定一大批元素或者僅僅幾個元素。具體性是度量選擇符的作用范圍的手段。所謂作用范圍,換句話說,指定是選擇符選擇了多少元素。在CSS的設計原則中,比較具體的選擇符將凌駕于較不具體的選擇符之上并取而代之。具體性是CSS中較為含糊和你難以掌握的概念之一,但也是這種語言中最強大的特性之一。接下來介紹一下選擇符:





1 全體選擇符

全體選擇符(universal)是一個星號(*)。它充當一個“通配符”,選擇文檔中的每一個元素。示例,下列規則將把藍色前景色應用到所有元素上:

*{ color: blue; }

標題、段落、列表、表格單元格甚至鏈接都將呈現為藍色,因為這一全體選擇符選擇了所有元素。這是最不具體的選擇符,因為它完全缺乏具體性。



2、元素選擇符

元素選擇符選擇一種元素的所有實例,其具體性來自于標簽名。這中選擇符比全體選擇符更具體,但還不是很具體,因為其目標是一種元素的每一個實例,無論他們到底有多少個。示例,下列將每一個p元素的前景色指定為紅色:

p{ color: red; }

元素選擇符也叫類型(type)選擇符。



3、類選擇符

類選擇符以class屬性中有指定類名的任何元素為目標。因為class屬于幾乎可用于XHTML中的任何元素,而已可以有任意數據的元素屬于同一個類,所以這種選擇符不是特別具體,但還是比元素選擇符更具體。在CSS中,類選擇符以一個圓點(.)開頭。示例,下列規則將影響所有屬于“info”類的元素的樣式:

.info { color:purple; }



4、ID選擇符

ID選擇符將僅僅選擇具有指定標識符的那個元素。實際上,ID屬性可用于幾乎所有元素,但一個ID屬性值在一個文檔中只能使用一次。ID選擇符在一個頁面中只以一個元素為目標,這使它比可能以很多元素為目標的類選擇符具體很多。ID選擇符以一個“#”符號開頭。示例,下列的規則將會將ID值為introduction的元素的前景色指定為綠色:

#introduction {color: green}



5、偽類選擇符

偽類選擇符類似于類選擇符,但其選擇的處于特定狀態的元素。這種選擇符符以冒號“:”開頭??捎玫膫晤愔挥杏邢迬讉€:


:link { color: blue; }

:visited { color: purple; }

:active { color: red; }

:hover { color: green; }

:focus { color:orange; }


:link偽類選擇所有超鏈接元素; :visited偽類選擇那些所指向的目標已經被訪問過的鏈接;:active偽類選擇處于活動狀態的鏈接,所謂處于活動狀態,指定是在被激活期間;:hover偽類選擇用戶的定點設為“懸浮”于其上方的元素,雖然任何元素都能處于有定點設備懸浮其上的狀態,但是這一偽類最常用語鏈接;:focus偽類選擇擁有焦點的元素。

除此之外還靜態偽類。


div:first-child 獲取所有身為第一個子元素的DIV;

div:last-child 獲取所有身為最后一個字元素的DIV;

div:only-child 獲取所有身為唯一子元素的DIV;

div#containerp:first-of-type 獲取ID值為“container”的DIV元素的后代,而其必須是第一個P類型子元素;

p:last-of-type 獲取所有身為最后一個P類型的子元素;

p:only-of-type 獲取所有身為唯一P類型子元素的元素;

p:nth-of-type(7)獲取為第7個P類型子元素的元素;

div:empty 獲取完全空的DIV元素(包括文本節點);

div:not()獲取所有ID屬性值不同“container”的DIV元素;

div:nth-child(3) 獲取為第三個子元素的DIV元素;

div:nth-child(odd)獲取所有DIV元素集中序數為奇數的元素;

div:nth-child(event)獲取所有DIV元素集中序數為偶數的元素;

div:nth-child(5n+3)從第三個DIV子元素開始,獲取所有DIV元素序數為(5n+3)的元素;

th:nth-last-of-type(-n+3)獲取任何表格的最后三行;

td:nth-last-child(n+1)除最后一列外,獲取表格的所有單元格;

input:enabled 獲取所有可用的INPUT元素;

input:disabled 獲取所有禁用的INPUT元素;

input:checed 獲取所有選擇的INPUT元素;




6、后代選擇符

后代選擇符是CSS的武符庫中最有用和最強大的選擇符之一。它可以組裝自兩個或多個用空格分隔的基本類型的選擇符(全體、元素、類、偽類和ID選擇符),用于選擇文檔樹中匹配該位置的元素。這種選擇符也被稱為上下文選擇符(contextual selector),因為它們是善于元素在文檔中的上下文來選擇它們。示例:

#introduction em{ color: yellow; }

這一規則把ID值為“introduction”的元素中包含任何em元素的顏色設置為黃色。



7、組合選擇符

可以把兩種或者多種類型的選擇符組合式使用,這些組合能夠進一步增強選擇符的具體性。示例:

p.info { color:blue; }

它只選擇屬于info類的段落,屬于該類的別種元素和不屬于info類的其他段落將被忽略。



8、分組選擇符

可以把幾個選擇符聚集其他作為一條規則的組合部分,以便同一套唐詩聲明集能夠應用到許多元素上,這樣可以避免對這些選擇符重復同一套樣式聲明。示例:

p, h1, h2 {color: blue; }

這一規則將同樣的顏色值應用到p、 h1、h2元素的每一個實例。

分組選擇符和組合選擇符是保證樣式表簡介性和可管理性的有效手段。



9、高級選擇符

9.1、屬性選擇符(attribute selector)

其以具有特定屬性甚至是具有其值為指定值得特定屬性的元素目標。

div 獲取所有擁有id屬性的DIV元素;

div 獲取所有ID屬性值為“container”的DIV元素;

input 獲取所有type屬性為“text”和value屬性值為“Yes”的INPUT元素;

div 獲取所有ID屬性值以“empt”開頭的DIV元素;

div 獲取所有ID屬性值以“parent”結尾的DIV元素;

div 獲取所有ID屬性值包含“mpt”字符串的DIV元素;

div 獲取所有class屬性值是一個一個空格分割的列表,且其中之一為“bar”的DIV元素;

div 獲取所有lang屬性是一個以連字符分隔的列表,且以“zh”開頭的DIV元素;

9.2、偽元素選擇符(pseudo element selector)

其目標并不明確存在于標記代碼中,而是隱含于其結構之中。如段落的首行,緊隨一個元素之后的另一個元素。

::first-line 定義段落的第一行;

::first-letter 定義段落的第一個字符;

::before 在元素的開始動態的插入內如;

::after 在元素的結尾動態的插入內容;

::selection 改變用戶鼠標選擇的內容樣式;

9.3、子選擇符(child selector)

其選擇一個元素的子元素,但不選擇器他后代元素。

div > p

獲取所有是DIV元素直屬后代的P元素

9.4、毗鄰同胞選擇符(adjacent sibling selector)

其目標是一個元素的同胞元素中緊隨其后的那個。

   div + p 獲取所有直屬前去兄弟是DIV元素的P元素;

div ~ p 獲取所有是DIV元素后繼兄弟的P元素(不一定直屬);

版權所有

發表評論

2017怎样手机上赚钱 陕西11选5走势 内蒙古十一选五开奖 生肖牛的最旺数字是什么 炒股正规平台 河南快三走势 根据投资所选标的的差异股票指数投资策略 湖北快三 青海11选5开奖结果一定牛 福建体彩11选5走势图近100期 河南体彩泳坛夺金玩法