轉 css選擇器

時間  2019-11-08
標籤 css 選擇器 欄目 CSS 简体版
原文   原文鏈接

　CSS是對網頁設計師可用的最強大的工具之一。使用它咱們能夠在幾分鐘內改變一個網站的界面，而不用改變頁面的標籤。可是儘管事實上，咱們每一個人也都意識到了它是有用的，CSS 選擇器遠未發揮它們的潛力，有的時候咱們還趨向於使用過多的和無用的class、id、div、span等把咱們的HTML搞的很凌亂。css

　　避免讓這些「瘟疫」在你的標籤中傳播並保持其簡潔和語義化的最佳方式，就是使用更復雜的CSS選擇器，它們能夠定位於指定的元素而不用使用額外的class或id，並且經過這種方式也可讓咱們的代碼和樣式更加靈活。html

　　1、基本選擇器瀏覽器

選擇器 描述 CSS版本
E 標籤選擇器，匹配全部使用E標籤的元素  
* 通用元素選擇器，匹配任何元素  
.info class選擇器，匹配全部class屬性中包含info的元素  
#footer id選擇器，匹配全部id屬性等於footer的元素  

好比：ide

複製代碼

1 * { margin:0; padding:0;}
2 
3 p { font-size:2em;}
4 
5 .info { background:#ff0;}
6 
7 p.info { background:#ff0;}
8 
9 p.info.error { color:#900; font-weight:bold;}
10 
11 p#info { background:#ff0;}
 
 
 
 

2、多元素的組合選擇器工具

選擇器 描述 CSS版本
E，F 多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號隔開  
E F 後代元素選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔  
E>F 子元素選擇器，匹配全部E元素的兒子元素F  
E+F 毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F  
E~F 匹配任何E標籤以後的同級F標籤 3

好比：post

複製代碼
1 div,p { color:#f00;}
2 #nav,li { display:inline;}
3 #nav a { font-weight:bold;}
4 div>strong { color:#f00;}
5 p+p { color:#f00;}
6 p~ul { color:#f00;}
複製代碼

一、並列選擇器（E,F,G,...）字體

　　這類選擇器之間用逗號做分割，能匹配選擇器列出的全部標籤元素。網站

二、後代選擇器（E F; E>F）url

　　E F,標籤之間用空格隔開，表示匹配E標籤內全部F標籤，所匹配的F標籤不只僅是E標籤的兒子，還有多是E標籤的孫子，或者曾孫、從孫等等。spa

　　E>F標籤匹配全部爲E標籤兒子的F標籤。

三、兄弟選擇器（E+F；E~F）

　　E~F選擇其中F標籤無需牢牢跟隨E標籤後面第一個，若是須要實現這樣的一個功能能夠用E+F選擇器。對於IE瀏覽器來講只有IE6以上的版本才支持該選擇器。

3、屬性選擇器

選擇器 描述 CSS版本
E[attribute] 匹配全部具備attribute屬性的E元素，不考慮它的值。（注意：E在此處能夠省略，好比「[cheacked]」。如下同。）  2.1
E[attribute=value] 匹配全部attribute屬性等於「value」的E元素  2.1
E[attribute~=value] 匹配全部attribute屬性具備多個空格分隔的值、其中一個值等於「value」的E元素  2.1
E[attribute|=value] 匹配這類E元素，它具備attribute屬性的就是「value」或者以「value」開始並當即跟上一個「-」字符，也就是「value-」,主要用於lang屬性,好比「en」、「en-us」、「en-gb」等等  2.1
E[attribute^=value] 匹配全部attribute屬性值是以「value」開始的E元素  3
E[attribute*=value] 匹配全部attribute屬性值包含有「value」的E元素  3
E[attribute$=value] 匹配全部attribute屬性值是以"value"結束的E元素  3

好比： 

複製代碼

1 p[title] { color:#f00;}
2 
3 div[class=error] { color:#f00;}
4 
5 td[headers~=col1] { color:#f00;}
6 
7 p[lang|=en] { color:#f00;}
8 
9 blockquote[class=quote][cite] { color:#f00;}
10 
11 div[id^="nav"] { background:#ff0;}
12 
13 div[id$="nav"] { background:#ff0;}
14 
15 
16 a[href*=".jpg"] {
17 background: url(jpeg.gif) no-repeat left 50%;
18 padding: 2px 0 2px 20px;
19 }
20  

4、僞類選擇器

選擇器 描述 CSS版本
E:first-child 匹配父元素的第一個子元素E 2.1
E:link 匹配全部未被點擊的連接 2.1
E:visited 匹配全部已被點擊的連接 2.1
E:active 匹配鼠標已經其上按下、尚未釋放的E元素 2.1
E:hover 匹配鼠標懸停其上的E元素 2.1
E:focus 匹配得到當前焦點的E元素 2.1
E:lang(c) 匹配lang屬性等於c的E元素 2.1
E:enabled 匹配表單中激活的元素 3
E:disabled 匹配表單中禁用的元素 3
E:checked 匹配表單中被選中的radio或者checkbox元素 3
E::selection 匹配用戶當前選中的元素 3
E:root 匹配文檔的根元素，對於HTML文檔，就是HTML元素 3
E:nth-child(n) 匹配其父元素的第n個子元素，n從1開始計算 3
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號爲1 3
E:nth-of-type(n) 與:nth-child(n)做用相似，用做匹配使用同種標籤的第n個元素 3
E:nth-last-of-type 與:nth-last-child做用相似，用做匹配同種標籤的最後一個元素 3
E:last-child 匹配父元素的最後一個子元素，等同於E:nth-last-child(1) 3
E:first-of-type 匹配父元素下使用同種標籤的第一個元素，等同於E:nth-of-type(1) 3
E:last-of-type 匹配父元素下使用同種標籤的最後一個元素，等同於E:nth-last-of-type(1) 3
E:only-child 匹配父元素下僅有的一個子元素，等同於E:first-child:last-child或者E:nth-child(1):nth-last-child(1) 3
E:only-of-type 匹配父元素下使用相同標籤的惟一一個子元素，等同於E:first-of-type:last-of-type或者E:nth-of-type(1):nth-last-of-type(1) 3
E:empty 匹配一個不包含任何子元素的元素，注意，文本節點也被看做子元素 3 
E:not(s) 匹配不符合當前選擇器的任何E標籤元素 3 
E:target 匹配文檔中特定「id」點擊後的效果 3 

　　一、E:first-child

　　您可使用 :first-child 僞類來選擇元素的第一個子元素。這個特定僞類很容易遭到誤解，因此有必要舉例來講明。在下面的例子中，選擇器匹配做爲任何元素的第一個子元素的 p 元素（也就是第11行的p，不是strong元素）：

1 <html>
2  <head>
3  <style type="text/css">
4 p:first-child 
5 {
6 color: red;
7 } 
8  </style>
9  </head>
10  <body>
11  <p>123123<strong>some text</strong></p>
12  <p>some text</p>
13  </body>
14  </html>

最多見的錯誤是認爲 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。對於IE瀏覽器，必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE6+ 中生效。還有一個問題就是，有時候會建立一個aspx文件，以下：

複製代碼

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default21.aspx.cs"Inherits="Default21"%>
2 
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <style type="text/css">
9 p:first-child
10 {
11 background-color:Red;
12 }
13 </style>
14 </head>
15 <body>
16 <form id="form1" runat="server">
17 <p>
18 123123123123123123
19 </p>
20 </form>
21 </body>
22 </html>
複製代碼
運行起來發現字體顏色並非紅色，爲何呢？其實這個p不是第一個元素。咱們能夠查看一下頁面運行起來後生成的Html，這樣問題就清楚了。
 
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head><title>
6 
7 </title>
8 <style type="text/css">
9 p:first-child
10 {
11 background-color:Red;
12 }
13 </style>
14 </head>
15 <body>
16 <form name="form1" method="post" action="Default21.aspx" id="form1">
17 <div>
18 <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"value="/wEPDwULLTE2MTY2ODcyMjlkZK7s3d9MopxNO2l9SJNVyVvw+Q5v"/>
19 </div>
20 
21 <p>
22 123123123123123123
23 </p>
24 </form>
25 </body>
26 </html>

二、動態僞類

　　所謂的動態僞類，是指它們並不存在HTML中，而是隻有當用戶和網站交互的時候纔會呈現。E:link, E:visited, E:hover, E:active 和 E:focus都屬於這類，前面四種又稱之錨僞類。

　　在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。a:active 必須被置於 a:hover 以後，纔是有效的。僞類名稱對大小寫不敏感。

動態僞類被全部的現代瀏覽器支持，甚至IE6。可是請注意，對於IE系列瀏覽器來講，IE6只容許:hover 僞類應用於連接元素(a標籤)，並且只有IE8才接受應用於非a標籤的:active狀態。

1 a:link {color: #FF0000}/* 未訪問的連接 */
2 a:visited {color: #00FF00}/* 已訪問的連接 */
3 a:hover {color: #FF00FF}/* 鼠標移動到連接上 */
4 a:active {color: #0000FF}/* 選定的連接 */
5 input:hover {background-color: blue}/* 只有在IE6+或者Firefox上才起做用 */
6 input:active {background-color: green}/* 只有在IE8或者Firefox上才起做用 */

複製代碼

三、:lang僞類

　　語言僞類:lang 使你有能力爲不一樣的語言定義特殊的規則。在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型：

複製代碼

1 <html>
2  <head>
3 
4  <style type="text/css">
5 q:lang(no)
6 {
7 quotes: "~" "~"
8 }
9  </style>
10 
11  </head>
12 
13  <body>
14  <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
15  </body></html>
複製代碼

四、UI元素狀態僞類

　　有些HTML元素有enable 或disabled 狀態(好比，文本輸入框)和 checked 或unchecked 狀態(單選按鈕和複選框)。這些狀態就可使用:enabled、:disabled或:checked 僞類來分別定位。 

複製代碼

1 input:enabled
2  {
3 background-color:Red; 
4  }
5 input:disabled
6  {
7 background-color:Yellow;
8  }
9 input[type="checkbox"]:checked {
10 margin-left: 15px;
11  }
複製代碼

這類型的選擇除了IE瀏覽器不支持外，其餘的瀏覽器都支持。

五、E::Selection

　　目前沒有任何一款IE或Firefox 瀏覽器支持::selection 僞元素。Safari, Opera 和Chrome 均支持。

 div:selection
2  {
3 background-color:Green;
4  }

六、結構僞類選擇器

　　這類選擇器包括有E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type 和 E:empty。Internet Explorer (直到8.0版本)都不支持結構僞類。Firefox、Safari 和Opera 在其最新版本的瀏覽器支持這些選擇器。

複製代碼

1 p:nth-child(3) { color:#f00;}
2 
3 p:nth-child(odd) { color:#f00;}
4 
5 p:nth-child(even) { color:#f00;}
6 
7 p:nth-child(3n+0) { color:#f00;}
8 
9 p:nth-child(3n) { color:#f00;}
10 
11 tr:nth-child(2n+11) { background:#ff0;}
12 
13 tr:nth-last-child(2) { background:#ff0;}
14 
15 p:last-child { background:#ff0;}
16 
17 p:only-child { background:#ff0;}
18 
19 p:empty { background:#ff0;}
複製代碼

七、否認選擇器

　　否認選擇器:not()，可讓你定位不匹配該選擇器的元素

好比，若是你須要定義表單元素中的input元素，可是又不想包括submit類型的input的時候會灰常有用——你想它們有不一樣的樣式，以看起來像按鈕：

複製代碼

1 input:not([type="submit"]) 
2  {
3 width: 200px;
4 padding: 3px;
5 border: 1px solid #000000;
6  }
 

　　IE瀏覽器不支持這個選擇器。

八、:target選擇器

　　當你使用錨點(片斷標識符 fragment identifier)的時候，好比，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，這「#comments」就是一個片斷標識符，你就可使用:target僞類來控制目標的樣式。

舉個例子，好比你有一個很長的使用了不少文字和h2標題的頁面，而後在頁面的頭部有一個對這些標題的索引。若是在點擊索引內的某個連接時，相應的標題以某種方式高亮，而後滾動到相應的位置，對讀者就會頗有用。很簡單。 

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default"%>
2 
3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4  <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 <style>
8 :target
9 {
10 background-color:red
11 }
12 </style>
13 </head>
14 <body>
15 <form id="form1" runat="server">
16 <a href="#label">Text to be displayed</a>
17 <h2>123<a name="label">myanchor</a>123123123</h2>
18 </form>
19 </body>
20 </html>

複製代碼

 IE瀏覽器徹底不支持:target僞類，另外一個小問題就是Opera 在使用「前進」和後退按鈕時不支持該選擇器。可是其它的各個主流瀏覽器都支持該選擇器。

5、僞元素選擇器

選擇器 描述 CSS版本
E:first-line 匹配全部E標籤內的第一行 2.1 
E:first-letter 匹配全部E標籤內的第一個字母 2.1 
E:before 在E標籤以前插入生成的內容 2.1 
E:after 在E標籤以後插入生成的內容 2.1 

一、:first-line僞元素

　　"first-line" 僞元素用於向某個選擇器中的文字的首行添加特殊樣式：

1 p {font-size: 12pt}
2 p:first-line {color: #0000FF; font-variant: small-caps}
3 
4  <p>Some text that ends up on two or more lines</p>
5  

　　在上面的例子中，瀏覽器顯示根據 first-line 僞元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來進行分行的。first-line 僞元素僅能被用於塊級元素。

二、:first-letter僞元素

　　first-letter 僞元素用於向某個選擇器中的文本的首字母添加特殊的樣式：

1 p {font-size: 12pt}
2 p:first-letter {font-size: 200%; float: left}
3 
4  <p>The first words of an article.</p>

 

三、:before和:after僞元素

　　before 僞元素可用於在某個元素以前插入某些內容。after 僞類可用於在某個元素以後插入某些內容。這兩個僞元素經常只使用content屬性，來添加一些短語或排版元素。

複製代碼

1 p:before 
2  {
3 content: "Before P";
4  }
5 p:after
6  {
7 content: "After P.";
8  }
 
其實還有一個用法就是用做計數：
複製代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html>
3  <head>
4  <style type="text/css">
5 body {counter-reset:section;}
6 h1 {counter-reset:subsection;}
7 h1:before
8  {
9 counter-increment:section;
10 content:"Section " counter(section) ". ";
11  }
12 h2:before 
13  {
14 counter-increment:subsection;
15 content:counter(section) "." counter(subsection) " ";
16  }
17  </style>
18  </head>
19 
20  <body>
21 
22  <p><b>註釋：</b>若是已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 counter-increment 屬性。</p>
23 
24  <h1>HTML tutorials</h1>
25  <h2>HTML Tutorial</h2>
26  <h2>XHTML Tutorial</h2>
27  <h2>CSS Tutorial</h2>
28 
29  <h1>Scripting tutorials</h1>
30  <h2>JavaScript</h2>
31  <h2>VBScript</h2>
32 
33  <h1>XML tutorials</h1>
34  <h2>XML</h2>
35  <h2>XSL</h2>
36 
37  </body>
38  </html>
39  
固然，Firefox支持這兩個僞元素；對於IE瀏覽器，若是已規定 !DOCTYPE，那麼 IE8 （以及更高版本）才支持。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程