選擇器

51 阅读 0 评论 34 点赞

我是靠谱客的博主风中果汁，最近开发中收集的这篇文章主要介绍選擇器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

屬性選擇器

1.[att*=val]

如果元素用att表示的屬性之屬性值中包含用val指定的字符的話，該元素使用這個樣式

2.[att^=val]

如果元素用att表示的屬性之屬性值的開頭字符為用val指定的字符，該元素使用這個樣式

3.[att$=val]

如果元素用att表示的屬性之屬性值的結尾字符為用val指定的字符，該元素使用這個樣式

結構性偽類選擇器

1.偽類選擇器

使用類選擇器把相同元素定義成不同樣式

<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div.red{background-color:Red;}
div.blue{background-color:Blue;}
a:link{color:#ff0000;text-decoration:none;}
a:visited{color:#00ff00;text-decoration:none;}
a:hover{color:#ff00ff;text-decoration:none;}
a:active{color:#0000ff;text-decoration:none;}
</style>
</head>
<body>
<div class="red">哈羅</div>
<div class="blue">哈羅</div>
<div>哈羅</div>
<a href="#">哈羅</a>
</body>
</html>

2.偽元素選擇器

偽元素是只並不針對真正的元素使用的選擇器，而是CSS中已經定義好的偽元素使用的選擇器

選擇器 : 偽元素 { 屬性 : 值 }

選擇器類名 : 偽元素 { 屬性 : 值 }

CSS中，主要有如下4個偽元素選擇器

1.first-line

用於為某個元素中第一行文字使用樣式

2.first-letter

用於為某個元素中的文字的首字母(歐美文字)或第一個字(中文等)使用樣式

3.before

用於在某個元素之前插入一些內容

4.after

用於在某個元素之後插入一些內容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p:first-line{color:#0000ff;}
p:first-letter{color:Red;}
li:before{content:url(test.png)}
li:after{content:url(test.png)}
</style>
</head>
<body>
<p>
段落中第一行<br />
段落中第二行
</p>
<p>This is an text</p>
<p>這是一段文本</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>

結構性偽類選擇器

1.root

將樣式綁定到頁面根元素(文檔樹中最頂層結構元素，HTML頁面中就是包含整頁面的"<html>"部分)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
:root{background-color:Yellow;}
body{background-color:Green;}
</style>
</head>
<body>
<h1>標題</h1>
<p>內容...</p>
</body>
</html>

2.not

對某個結構元素使用樣式，且排除這個結構元素下的子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body *:not(h1){background-color:Green;}
</style>
</head>
<body>
<h1>標題</h1>
<p>內容...</p>
</body>
</html>

3.empty

當元素內容為空白時使用的樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
:empty{background-color:Red;}
</style>
</head>
<body>
<h1>標題</h1>
<p style="height:30px;"></p>
</body>
</html>

4.target

對頁面中某個target元素(改元素id被當做頁面中的超鏈接使用)指定樣式，該樣式只在用戶點擊頁面超鏈接，且跳轉到target元素后有效

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
:target{background-color:Yellow;}
</style>
</head>
<body>
<a href="#text1">實例1</a>
<div id="text1">
哈羅...
</div>
</body>
</html>

5.first-child,last-child

first-child單獨指定第一個子元素的樣式

last-child單獨指定最後一個子元素的樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li:first-child{background-color:Red;}
li:last-child{background-color:Blue;}
</style>
</head>
<body>
<ul>
<li>實例1</li>
<li>實例2</li>
<li>實例3</li>
</ul>
</body>
</html>

6.nth-child,nth-last-child

指定某個父元素中第一個子元素以及最後一個子元素，可針對父元素中某個指定序號的子元素來指定樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li:nth-child(2){background-color:Red;}
li:nth-last-child(2){background-color:Blue;}
</style>
</head>
<body>
<ul>
<li>實例1</li>
<li>實例2</li>
<li>實例3</li>
<li>實例4</li>
</ul>
</body>
</html>

對所有第奇數個子元素或第偶數個子元素使用樣式

odd偶數，even奇數

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li:nth-child(odd){background-color:Red;}
li:nth-child(even){background-color:Blue;}
</style>
</head>
<body>
<ul>
<li>實例1</li>
<li>實例2</li>
<li>實例3</li>
<li>實例4</li>
</ul>
</body>
</html>

7.nth-of-type,nth-last-of-type

這兩個選擇器，CSS3在計算子元素是第奇數個子元素還是第偶數個子元素是，只針對同類型子元素進行計算

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
/*h2:nth-child(odd){background-color:Red;}
h2:nth-child(even){background-color:Blue;}*/
h2:nth-of-type(odd){background-color:Red;}
h2:nth-of-type(even){background-color:Blue;}
</style>
</head>
<body>
<div>
<h2>標題</h2>
<p>正文...</p>
<h2>標題</h2>
<p>正文...</p>
<h2>標題</h2>
<p>正文...</p>
</div>
</body>
</html>

循環使用樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
li:nth-child(4n+1){background-color:Yellow;}
li:nth-child(4n+2){background-color:Fuchsia;}
li:nth-child(4n+3){background-color:GrayText;}
li:nth-child(4n+4){background-color:Teal;}
</style>
</head>
<body>
<ul>
<li>實例1</li>
<li>實例2</li>
<li>實例3</li>
<li>實例4</li>
<li>實例5</li>
<li>實例6</li>
<li>實例7</li>
<li>實例8</li>
</ul>
</body>
</html>

8.only-child

某個父元素中只有一個子元素時才使用的樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
/*li:nth-child(1):nth-last-child(1){background-color:Yellow;}*/
li:only-child{background-color:Yellow;}
</style>
</head>
<body>
<ul>
<li>實例1</li>
</ul>
<ul>
<li>實例1</li>
<li>實例2</li>
</ul>
</body>
</html>

UI元素狀態偽類選擇器

特徵：指定的樣式只有當元素處於某狀態下時才起作用

1.E:hover,E:active,E:focus

E:hover 當鼠標指針移動到元素上時元素所使用的樣式

E:active 指定元素被激活(鼠標在元素上按下未松開)時使用的樣式

E:focus 指定元素獲得光標焦點時使用的樣式，主要是文本框控件獲得焦點並進行文字輸入時用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input[type="text"]:hover{background-color:Green;}
input[type="text"]:focus{background-color:Blue;}
input[type="text"]:active{background-color:Yellow;}
</style>
</head>
<body>
<input type="text" name="name" />
<input type="text" name="address" />
</body>
</html>

2.E:enabled,E:disabled

E:enabled 指定當元素處於可用狀態時的樣式

E:disabled 指定當元素處於不可用狀態時的樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input[type="text"]:enabled{background-color:Green;}
input[type="text"]:disabled{background-color:Blue;}
</style>
</head>
<body>
<input type="text" name="name" />
<input type="text" name="address" disabled />
</body>
</html>

3.E:read-only,E:read-write

E:read-only 指定當元素處於只讀狀態時的樣式

E:read-write 指定當元素處於非只讀狀態時的樣式

在FF中需要寫為"-moz-read-only"或"-moz-read-wirte"的形式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input[type="text"]:read-only{background-color:Gray;}
input[type="text"]:read-write{background-color:Yellow;}
input[type="text"]:-moz-read-only{background-color:Gray;}
input[type="text"]:-moz-read-write{background-color:Yellow;}
</style>
</head>
<body>
<input type="text" name="name" />
<input type="text" name="address" readonly />
</body>
</html>

4.E:checked,E:default,E:indeterminate

E:checked 指定當表單中radio單選框或checkbox複選框處於選取狀態時的樣式(FF中需寫為"-moz-checked"的形式)

E:default 指定頁面打開時，默認處於選取狀態的單(複)選框的樣式

E:indeterminate 指定頁面打開時，一組單(複)選框中任何一個都沒設定為選取狀態時整組樣式，如果有一個選取，該樣式取消(目前Opera支持)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input[type="checkbox"]:checked{outline:2px solid blue;}
input[type="checkbox"]:-moz-checked{outline:2px solid blue;}
input[type="checkbox"]:default{outline:2px solid red;}
input[type="checkbox"]:indeterminate{outline:2px solid yellow;}
</style>
</head>
<body>
<input type="checkbox">1</input>
<input type="checkbox" checked>2</input>
<input type="checkbox">3</input>
</body>
</html>

5.E::selection

指定當元素處於選中狀態時的樣式(FF中需寫為"-moz-selection"的形式)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h1::selection{background:red;color:#fff;}
p::selection{background:red;color:#fff;}
input[type="text"]::selection{background:green;color:#fff;}
td::selection{background:blue;color:#fff;}
h1::-moz-selection{background:red;color:#fff;}
p::-moz-selection{background:red;color:#fff;}
input[type="text"]::-moz-selection{background:green;color:#fff;}
td::-moz-selection{background:blue;color:#fff;}
</style>
</head>
<body>
<h1>標題</h1>
<p>內容</p>
<input type="text" value="66" />
<table>
<tr>
<td>單元格</td>
</tr>
</table>
</body>
</html>

通用兄弟元素選擇器

用來指定位於同一父元素之中的某個元素之後的所有其他某個種類的兄弟元素所使用的樣式

<子元素> ~ <子元素之後的同級兄弟元素> { //樣式 }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div~p{background-color:Yellow;}
</style>
</head>
<body>
<div>
<div>
<p>p元素為div元素的子元素</p>
</div>
<p>p元素為div元素的兄弟元素</p>
</div>
</body>
</html>