首頁 > 開發者 > JavaScript
css3選取器（上），css3選取器(
1、給導航加分割線，左右
.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height:25px;
width:1px;
}
.nav li::before{
left:0;
background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);
background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);
}
.nav li::after{
right:0;
background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);
background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);
}
.nav li:first-child::before{ background:none;}
.nav li:last-child::after{ background:none;}
2、
html代碼：
<a href="xxx.pdf">我連結的是PDF檔案</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
css代碼
a[class^=icon]{
background: green;
color:#fff;//定義以icon開頭的任何字串
}
a[href$=pdf]{
background: orange;
color: #fff;定義href以pdf結尾任何字串
}
a[title*=more]{
background: blue;
color: #fff;定義有title的的任何字串
}
例如：<style>
a[class^=column]{
background:#fc0001;
}
a[href$=doc]{
background:#007d02;
}
a[title*=box]{
background:#0000fe;
}
</style>
<a href="##" class="columnNews">我的背景想變成紅色</a>
<a href="##" class="columnVideo">我的背景想變成紅色</a>
<a href="##" class="columnAboutUs">我的背景想變成紅色</a><br/>
<a href="1.doc">我的背景想變成綠色</a>
<a href="2.doc">我的背景想變成綠色</a><br/>
<a href="##" title="this is a box">我的背景想變成藍色</a>
<a href="##" title="box1">我的背景想變成藍色</a>
<a href="##" title="there is two boxs">我的背景想變成藍色</a>
3、
結構性偽類別選取器root
:root選取器，從字面上我們就可以很清楚的理解是根選取器，
他的意思就是匹配元素E所在文檔的根項目。在HTML文檔中，根項目始終是<html>
（“:root”選取器等同於<html>元素，簡單點說：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建議使用:root方法。
另外在IE９以下還可以藉助“:root”實現hack功能。）
4、
結構性偽類別選取器—not
:not選取器稱為否定選取器，和jQuery中的:not選取器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：form {
input:not([type="submit"]){
border:1px solid red;
}//意思是除了type=submit意外的input邊框為紅色
5、結構性偽類別選取器—empty
:empty選取器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。
比如說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選取器來控制。
HTML代碼：
<p>我是一個段落</p>
<p> </p>
<p></p>
CSS代碼：
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
6、結構性偽類別選取器—target
:target選取器稱為目標選取器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。
例:
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
css代碼：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target{
background: red;
color: #fff;
}
7、結構性偽類別選取器—first-child
“:first-child”選取器表示的是選擇父元素的第一個子項目的元素E。簡單點理解就是選擇元素中的第一個子項目，記住是子項目，而不是後代元素。
HTML代碼：
<ol>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">link3</a></li>
</ol>
CSS代碼：
ol > li:first-child{
color: red;
}//講html的序號第一個變成紅色，如果是無序列表則是前端的順序圖表標變色
First-child與last-child剛好相反
8、結構性偽類別選取器—nth-child(n)
“:nth-child(n)”選取器用來定位某個父元素的一個或多個特定的子項目。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是運算式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選取器將選擇不到任何匹配的元素。
HTML代碼：
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
CSS代碼：
ol > li:nth-child(2n){
background: orange;
}//通過“:nth-child(n)”選取器，並且參數使用運算式“2n”，將偶數行列表背景色設定為橙色。
9、結構性偽類別選取器—nth-last-child(n)
“:nth-last-child(n)”選取器和前面的“:nth-child(n)”選取器非常的相似，只是這裡多了一個“last”，所起的作用和“:nth-child(n)”選取器有所區別，從某父元素的最後一個子項目開始計算，來選擇特定的元素
ol > li:nth-last-child(5){
background: orange;
}//挑選清單中倒數第五個清單項目，將其背景設定為橙色。
10、first-of-type選取器
“:first-of-type”選取器類似於“:first-child”選取器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子項目。
通過“:first-of-type”選取器，定位div容器中的第一個p元素（p不一定是容器中的第一個子項目），並設定其背景色為橙色。
.wrapper > p:first-of-type {
background: orange;
//last-of-type選取器
“:last-of-type”選取器和“:first-of-type”選取器功能是一樣的，不同的是他選擇是父元素下的某個類型的最後一個子項目。
11、nth-of-type(n)選取器
“:nth-of-type(n)”選取器和“:nth-child(n)”選取器非常類似，不同的是它只計算父元素中指定的某種類型的子項目。當某個元素中的子項目不單單是同一種類型的子項目時，使用“:nth-of-type(n)”選取器來定位於父元素中某種類型的子項目是非常方便和有用的。在“:nth-of-type(n)”選取器中的“n”和“:nth-child(n)”選取器中的“n”參數也一樣，可以是具體的整數，也可以是運算式，還可以是關鍵詞。
例：.wrapper > p:nth-of-type(2n){
background: orange;
}通過“:nth-of-type(2n)”選取器，將容器“div.wrapper”中偶數段數的背景設定為橙色。
18、nth-last-of-type(n)選取器
“:nth-last-of-type(n)”選取器和“:nth-of-type(n)”選取器是一樣的，選擇父元素中指定的某種子項目類型，但它的起始方向是從最後一個子項目開始，而且它的使用方法類似於上節中介紹的“:nth-last-child(n)”選取器一樣。
通過“:nth-last-of-type(n)”選取器將容器“div.wrapper”中的倒數第三個段落背景設定為橙色。
.wrapper > p:nth-last-of-type(3){
background: orange;
}
12、only-child選取器
“:only-child”選取器選擇的是父元素中只有一個子項目，而且只有唯一的一個子項目。也就是說，匹配的元素的父元素中僅有一個子項目，而且是一個唯一的子項目。
樣本示範
通過“:only-child”選取器，來控制僅有一個子項目的背景樣式，為了更好的理解，我們這個樣本通過對比的方式來向大家示範。
HTML代碼：
<div class="post">
<p>我是一個段落</p>
<p>我是一個段落</p>
</div>
<div class="post">
<p>我是一個段落</p>
</div>
CSS代碼：
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
13、only-of-type選取器
“:only-of-type”選取器用來選擇一個元素是它的父元素的唯一一個相同類型的子項目。這樣說或許不太好理解，換一種說法。“:only-of-type”是表示一個元素他有很多個子項目，而其中只有一種類型的子項目是唯一的，使用“:only-of-type”選取器就可以選中這個元素中的唯一一個類型子項目。
樣本示範
通過“:only-of-type”選取器來修改容器中僅有一個div元素的背景色為橙色。
HTML代碼：
<div class="wrapper">
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<div>我是一個Div元素</div>
</div>
<div class="wrapper">
<div>我是一個Div</div>
<ul>
<li>我是一個清單項目</li>
</ul>
<p>我是一個段落</p>
</div>
CSS代碼：
.wrapper > div:only-of-type {
background: orange;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
