CSS3 基礎(1)——選擇器詳解

時間 2019-11-08

標籤 css3 css 基礎選擇器詳解欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站CSS3 基礎(1)——選擇器詳解php

CSS3選擇器詳解html

1、屬性選擇器網站

　　在CSS3中，追加了三個屬性選擇器分別爲：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。this

選擇器spa	示例code	描述orm
[attribute^=value]htm	[src^="https"]blog	選擇每個src屬性的值以"https"開頭的元素教程
[attribute$=value]	[src$=".pdf"]	選擇每個src屬性的值以".pdf"結尾的元素
[attribute*=value]	[src*="runoob"]	選擇每個src屬性的值包含子字符串"runoob"的元素

示例:

代碼	說明
div[class^="test"]{background:#ffff00;}	設置class屬性值以"test"開頭的全部div元素的背景顏色
[class^="test"]{background:#ffff00;}	設置class屬性值以"test"開頭的全部元素的背景顏色
div[class$="test"]{background:#ffff00;}	設置class屬性值以"test"結尾的全部div元素的背景顏色
[class$="test"]{background:#ffff00;}	設置class屬性值以"test"結尾的全部元素的背景顏色
div[class*="test"]{background:#ffff00;}	設置class屬性值包含"test"的全部div元素的背景顏色
[class*="test"]{background:#ffff00;}	設置class屬性值包含"test"的全部元素的背景顏色

2、結構性僞類選擇器（一）

選擇器	示例	描述
結構性僞元素選擇器
:first-letter	p:first-letter	選擇每個<P>元素的第一個字母
:first-line	p:first-line	選擇每個<P>元素的第一行
:before	p:before	在每一個<p>元素以前插入內容
:after	p:after	在每一個<p>元素以後插入內容
結構性僞類選擇器：共同特徵是容許開發者根絕文檔中的結構來指定元素的樣式
:root	:root	選擇文檔的根元素
:not(selector)	:not(p)	選擇每一個並不是p元素的元素
:empty	p:empty	選擇每一個沒有任何子級的p元素（包括文本節點）
:target	#news:target	選擇當前活動的#news元素（包含該錨名稱的點擊的URL）

　　　　　①每一個<p>元素以後插入內容： p:after{ content:"- Remember this"; }

　　　　　②設置HTML文檔的背景色： :root{ background:#ff0000; }

　　　　　　:root選擇器用匹配文檔的根元素，在HTML中根元素始終是HTML元素。

　　　　　③爲每一個並不是<p>元素的元素設置背景顏色： :not(p) { background:#ff0000; }

　　　　　④指定空的p元素的背景色： p:empty { background:#ff0000; }

　　　　　　:empty選擇器選擇每一個沒有任何子級的元素（包括文本節點）。

　　　　　⑤:target選擇器可用於當前活動的target元素的樣式,只能用id標識

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>菜鳥教程(runoob.com)</title>
 6     <style>
 7         :target{
 8         border: 2px solid #D4D4D4;
 9         background-color: #e5eecc;
10         }
11     </style>
12 </head>
13 <body>
14     <h1>This is a heading</h1>
15     <p><a href="#news1">Jump to New content 1</a></p>
16     <p><a href="#news2">Jump to New content 2</a></p>
17     <p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
18     <p id="news1"><b>New content 1...</b></p>
19     <p id="news2"><b>New content 2...</b></p>
20 </body>
21 </html>

3、結構性僞類選擇器（二）

選擇器	示例	描述
:first-child	p:first-child	指定只有當<p>元素是其父級的第一個子級的樣式。
:last-child	p:last-child	選擇每一個p元素是其父級的最後一個子級。
:nth-child(n)	p:nth-child(2)	選擇每一個p元素是其父級的第二個子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇每一個p元素的是其父級的第二個子元素，從最後一個子項計數
:nth-of-type(n)	p:nth-of-type(2)	選擇每一個p元素是其父級的第二個p元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇每一個p元素的是其父級的第二個p元素，從最後一個子項計數

　　　　①指定父元素中最後一個p元素的背景色： p:last-child{ background:#ff0000; }

　　　　②指定每一個p元素匹配同類型中的倒數第2個同級兄弟元素背景色： p:nth-last-child(2){ background:#ff0000; }

　　　　③:nth-child(n)選擇器匹配父元素中的第n個子元素，n能夠是一個數字，一個關鍵字(奇偶數等關鍵字)，或者一個公式。該索引的第一個子節點是1。

　　　　④:nth-of-type(n)選擇器匹配同類型中的第n個同級兄弟元素，n能夠是一個數字，一個關鍵字，或者一個公式。該索引的第一個子節點是1。

　　 p:nth-of-type(odd){background:#ff0000;}

　　 p:nth-of-type(even){background:#0000ff;}

　　⑤使用公式（an+ b）.描述：a表明一個循環的大小，N是一個計數器（從0開始），以及b是偏移量。在這裏，咱們對全部索引是3的倍數的p元素指定了背景顏色： p:nth-child(3n+0){ background:#ff0000; }

　　⑥:only-child擇器匹配屬於父元素中惟一子元素的元素。 p:only-child{background:#ff0000; }

4、UI元素狀態僞選擇器

　　在CSS3的選擇器中，除告終構性僞類選擇器外，還有一種UI元素狀態僞類選擇器。這類選擇器的共同特徵是：指定的樣式只有當元素處於某種狀態下時才起做用，在默認狀態下不起做用。在CSS3中，共有17種UI元素狀態僞類選擇器。

選擇器	示例	描述
:link	a:link	選擇全部未訪問連接
:active	a:active	選擇活動連接
:hover	a:hover	選擇鼠標在連接上面時
:focus	input:focus	選擇具備焦點的輸入元素(選中)
:checked	input:checked	選擇每一個選中的輸入元素

①:hover在鼠標移到連接上時添加的特殊樣式。

提示: :hover 選擇器器可用於全部元素，不只是連接。

提示: :link 選擇器設置了未訪問過的頁面連接樣式, :visited 選擇器設置訪問過的頁面連接的樣式 :active選擇器設置當你點擊連接時的樣式。

注意: 爲了產生預期的效果，在 CSS 定義中，:hover 必須位於 :link 和 :visited 以後！

　　②:focus選擇器用於選擇具備焦點的元素。

　　　　提示: :focus選擇器接受鍵盤事件或其餘用戶輸入的元素。

　　　　　一個輸入字段得到焦點時選擇的樣式：input:focus{background-color:yellow;}

1 <html>
 2 <head>
 3     <meta charset="utf-8"> 
 4     <title></title>
 5     <style>
 6         input:focus{
 7             background-color:yellow;
 8         }
 9     </style>
10 </head>
11 <body>
12     <p>點擊文本輸入框表單能夠看到黃色背景:</p>
13     <form>
14         First name: <input type="text" name="firstname" /><br>
15         Last name: <input type="text" name="lastname" />
16     </form>
17     <p><b>注意:</b>  :focus 做用於 IE8,DOCTYPE 必須已聲明</p>
18 </body>
19 </html>

　　　　③:checked 選擇器匹配每一個選中的輸入元素（僅適用於單選按鈕或複選框）。

　　　　爲全部選中的輸入元素設置背景顏色：input:checked { height: 50px; width: 50px; }

1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style>
 6         input:checked {
 7             height: 50px;
 8             width: 50px;
 9         }
10     </style>
11 </head>
12 <body>
13     <form action="">
14         <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
15         <input type="radio" value="female" name="gender" /> Female<br>
16         <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
17         <input type="checkbox" value="Car" /> I have a car
18     </form>
19 </body>
20 </html>

選擇器	示例	描述
:enabled	input:enabled	選擇每個已啓用的輸入元素
:disabled	input:disabled	選擇每個禁用的輸入元素

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>菜鳥教程(runoob.com)</title> 
 6     <style> 
 7         input:enabled{
 8         background:#ffff00;
 9         }
10         input:disabled{
11         background:#dddddd;
12         }
13     </style>
14 </head>
15 <body>
16     <form action="">
17         First name: <input type="text" value="Mickey" /><br>
18         Last name: <input type="text" value="Mouse" /><br>
19         Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
20         Password: <input type="password" name="password" />
21         <input type="radio" value="male" name="gender" /> Male<br>
22         <input type="radio" value="female" name="gender" /> Female<br>
23         <input type="checkbox" value="Bike" /> I have a bike<br>
24         <input type="checkbox" value="Car" /> I have a car 
25     </form>
26 </body>
27 </html>

5、通用兄弟元素選擇器：

　　它用來指定位於一個父元素之中的某個元素以後的全部其餘某個種類的兄弟元素所使用樣式。

　　如：同一div下的子p 元素，以「~」鏈接， div ~ p{background-color:gold}