CSS選擇器
CSS是對網頁設計師可用的最強大的工具之一。使用它我們可以在幾分鐘內改變一個網站的界面，而不用改變頁面的標簽。但是盡管事實上，我們每個人也都意識到了它是有用的，CSS 選擇器遠未發揮它們的潛力，有的時候我們還趨向于使用過多的和無用的class、id、div、span等把我們的HTML搞的很凌亂。 避免讓這些“瘟疫”在你的標簽中傳播并保持其簡潔和語義化的最佳方式，就是使用更復雜的CSS選擇器，它們可以定位于指定的元素而不用使用額外的 class或id，而且通過這種方式也可以讓我們的代碼和樣式更加靈活。一、基本選擇器
| 選擇器 | 描述 | CSS版本 | </tr>|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| E | 標簽選擇器，匹配所有使用E標簽的元素 | </tr> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| * | 通用元素選擇器，匹配任何元素 | </tr> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| .info | class選擇器，匹配所有class屬性中包含info的元素 | </tr> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #footer | id選擇器，匹配所有id屬性等于footer的元素 | </tr> </tbody> </table> |
| 選擇器 | 描述 | 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 |
比如：
div,p { color:#f00; }
#nav,li { display:inline; }
#nav a { font-weight:bold; }
div>strong { color:#f00; }
p+p { color:#f00; }
p~ul { color:#f00; }
1、并列選擇器（E,F,G,...）
這類選擇器之間用逗號作分割，能匹配選擇器列出的所有標簽元素。
2、后代選擇器（E F; E>F）
E F,標簽之間用空格隔開，表示匹配E標簽內所有F標簽，所匹配的F標簽不僅僅是E標簽的兒子，還有可能是E標簽的孫子，或者曾孫、從孫等等。
E>F標簽匹配所有為E標簽兒子的F標簽。
3、兄弟選擇器（E+F；E~F）
E~F選擇其中F標簽無需緊緊跟隨E標簽后面第一個，如果需要實現這樣的一個功能可以用E+F選擇器。對于IE瀏覽器來說只有IE6以上的版本才支持該選擇器。
三、屬性選擇器
| 選擇器 | 描述 | 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 |
比如：
CSS
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
div[id^="nav"] { background:#ff0; }
div[id$="nav"] { background:#ff0; }
a[href*=".jpg"] {
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
四、偽類選擇器
| 選擇器 | 描述 | 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 |
1、E:first-child
您可以使用 :first-child 偽類來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解，所以有必要舉例來說明。在下面的例子中，選擇器匹配作為任何元素的第一個子元素的 p 元素（也就是第11行的p，不是strong元素）：
<html>
<head>
<style type="text/css">
p:first-child
{
color: red;
}
</style>
</head>
<body>
<p>123123<strong>some text</strong></p>
<p>some text</p>
</body>
</html>
最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。對于IE瀏覽器，必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE6+ 中生效。還有一個問題就是，有時候會創建一個aspx文件，如下：
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default21.aspx.cs" Inherits="Default21" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
p:first-child
{
background-color:Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
123123123123123123
</p>
</form>
</body>
</html>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<style type="text/css">
p:first-child
{
background-color:Red;
}
</style>
</head>
<body>
<form name="form1" method="post" action="Default21.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZK7s3d9MopxNO2l9SJNVyVvw+Q5v" />
</div>
<p>
123123123123123123
</p>
</form>
</body>
</html
2、動態偽類
所謂的動態偽類，是指它們并不存在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狀態。
CSS
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
input:hover {background-color: blue} /* 只有在IE6+或者Firefox上才起作用 */
input:active {background-color: green} /* 只有在IE8或者Firefox上才起作用 */
3、:lang偽類
語言偽類:lang 使你有能力為不同的語言定義特殊的規則。在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的類型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
4、UI元素狀態偽類
有些HTML元素有enable 或disabled 狀態(比如，文本輸入框)和 checked 或unchecked 狀態(單選按鈕和復選框)。這些狀態就可以使用:enabled、:disabled或:checked 偽類來分別定位。
input:enabled
{
background-color:Red;
}
input:disabled
{
background-color:Yellow;
}
input[type="checkbox"]:checked {
margin-left: 15px;
}
這類型的選擇除了IE瀏覽器不支持外，其他的瀏覽器都支持。
5、E::Selection
目前沒有任何一款IE或Firefox 瀏覽器支持::selection 偽元素。Safari, Opera 和Chrome 均支持。
div:selection
{
background-color:Green;
}
6、結構偽類選擇器
這類選擇器包括有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 在其最新版本的瀏覽器支持這些選擇器。
CSS
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; }
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }
7、否定選擇器
否定選擇器:not()，可以讓你定位不匹配該選擇器的元素
比如，如果你需要定義表單元素中的input元素，但是又不想包括submit類型的input的時候會灰常有用——你想它們有不同的樣式，以看起來像按鈕：
input:not([type="submit"])
{
width: 200px;
padding: 3px;
border: 1px solid #000000;
}IE瀏覽器不支持這個選擇器。 8、:target選擇器
當你使用錨點(片段標識符 fragment identifier)的時候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，這“#comments”就是一個片段標識符，你就可以使 用:target偽類來控制目標的樣式。
舉個例子，比如你有一個很長的使用了很多文字和h2標題的頁面，然后在頁面的頭部有一個對這些標題的索引。如果在點擊索引內的某個鏈接時，相應的標題以某種方式高亮，然后滾動到相應的位置，對讀者就會很有用。很簡單。
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
:target
{
background-color:red
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a href="#label">Text to be displayed</a>
<h2>123<a name="label">myanchor</a>123123123</h2>
</form>
</body>
</html> IE瀏覽器完全不支持:target偽類，另一個小問題就是Opera 在使用“前進”和后退按鈕時不支持該選擇器。但是其它的各個主流瀏覽器都支持該選擇器。
五、偽元素選擇器
| 選擇器 | 描述 | CSS版本 |
| E:first-line | 匹配所有E標簽內的第一行 | 2.1 |
| E:first-letter | 匹配所有E標簽內的第一個字母 | 2.1 |
| E:before | 在E標簽之前插入生成的內容 | 2.1 |
| E:after | 在E標簽之后插入生成的內容 | 2.1 |
1、:first-line偽元素
"first-line" 偽元素用于向某個選擇器中的文字的首行添加特殊樣式：
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Some text that ends up on two or more lines</p>
在上面的例子中，瀏覽器顯示根據 first-line 偽元素格式化的第一行。瀏覽器是依靠瀏覽器窗口的尺寸來進行分行的。first-line 偽元素僅能被用于塊級元素。 2、:first-letter偽元素
first-letter 偽元素用于向某個選擇器中的文本的首字母添加特殊的樣式：
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>The first words of an article.</p> 3、:before和:after偽元素
before 偽元素可用于在某個元素之前插入某些內容。after 偽類可用于在某個元素之后插入某些內容。這兩個偽元素常常只使用content屬性，來添加一些短語或排版元素。
p:before
{
content: "Before P";
}
p:after
{
content: "After P.";
}其實還有一個用法就是用作計數：
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<p><b>注釋：</b>如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 屬性。</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>