【CSS3】選擇器（屬性 & 結構性偽類）--慕課網【學習總結】

阿新 • • 發佈：2019-01-18

1.屬性選擇器

CSS3新增了3個屬性選擇器，使得屬性選擇器有了萬用字元的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：
這裡寫圖片描述

【例如】

<!--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;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

這裡寫圖片描述

2.結構性偽類選擇器

（1）root & not & empty & target

①root

根選擇器：匹配元素E所在文件的根元素。在HTML文件中，根元素始終是<html>。

“:root”選擇器等同於 <html> 元素：

:root 
{background:orange}
html {background:orange;}

建議使用:root方法。
另外在IE９以下還可以藉助“:root”實現hack功能。

【例如】

<!--html程式碼-->
<div>:root選擇器的演示</div>

/*css程式碼*/
:root {
  background:orange;
}

效果：
這裡寫圖片描述

②not

否定選擇器：可以選擇除某個元素之外的所有元素。和jQuery中的:not選擇器一模一樣。

【例如】

給form表單中除submit按鈕之外的input元素新增紅色邊框：

/*css程式碼*/
form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bottom: 20px;
}
input:not([type="submit"]){
  border:1px solid red;
}

<!--html程式碼-->
<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

效果：
這裡寫圖片描述

③empty

空選擇器。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。

【例如】

有三個段落p元素，需把沒有任何內容的P元素隱藏起來。就可以使用“:empty”選擇器來控制：

<!--html程式碼-->
<p>我是一個段落</p>
<p> </p>
<p></p>

/*css程式碼*/
p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

效果：
這裡寫圖片描述

④target

目標選擇器，用來匹配文件(頁面)的url的某個標誌符的目標元素。

【例如1】

點選連結顯示隱藏的段落：

<!--html程式碼-->
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

/*css程式碼*/
.menuSection{
  display: none;
}
:target{/*這裡的:target就是指id="brand"的div物件*/
  display:block;
}

效果：
這裡寫圖片描述

【分析】

1、具體來說，觸發元素的URL中的標誌符通常會包含一個#號，後面帶有一個標誌符名稱，上面程式碼中是：#brand；
2、：target就是用來匹配id為“brand”的元素（id=”brand”的元素）,上面程式碼中是那個div元素。

【例如2】

多個url（多個target）處理：
就像上面的例子，#brand與後面的id=”brand”是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號後對的名稱與id=""中的名稱對應就可以了。下面可以對不同的target物件分別設定不的樣式：

<!--html程式碼-->
<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;
}

（2）first-child & last-child & nth-child(n) & nth-last-child(n)

①first-child

選擇其父元素的第一個子元素。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

【例如】

通過“:first-child”選擇器定位列表中的第一個列表項，並將序列號顏色變為紅色：（指定屬於其父元素ol的第一個子元素的 li 元素的顏色）

<!--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;
}

效果：
這裡寫圖片描述

②last-child

“:last-child”選擇器選擇的是其父元素的最後一個子元素。

【例如】

指定屬於其父元素ul的最後一個子元素的 li 元素的背景色：

ul>li:last-child{background:blue;}

③nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素(順序)。
　　其中“n”是其引數，而且可以是整數值(1,2,3,4)，也可以是表示式(2n+1、-n+5)和關鍵詞(odd、even)，但引數n的起始值始終是1，而不是0。也就是說，引數n的值為0時，選擇器將選擇不到任何匹配的元素。

【經驗與技巧】

當“:nth-child(n)”選擇器中的n為一個表示式時，其中n是從0開始計算，當表示式的值為0或小於0的時候，不選擇任何匹配的元素。如下表所示：
這裡寫圖片描述

【例如】

通過“:nth-child(n)”選擇器，並且引數使用表示式“2n”，將偶數行列表背景色設定為橙色：

<!--html程式碼-->
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ol>

/*css程式碼*/
ol > li:nth-child(2n){
  background: orange;
}

效果：
這裡寫圖片描述

④nth-last-child(n)

從某父元素的最後一個子元素(逆序)開始計算，來選擇特定的元素。

小tips： p:last-child 等同於 p:nth-last-child(1)。

【例如】

選擇列表中倒數第五個列表項，將其背景設定為橙色：

/*css程式碼*/
ol > li:nth-last-child(5){
  background: orange;
}

（3）first-of-type & last-of-type & nth-of-type(n) & nth-last-of-type(n)

①first-of-type選擇器

“:first-of-type”選擇器類似於“:first-child”選擇器，不同之處就是指定了元素的型別，其主要用來定位一個父元素下的某個型別的第一個子元素。

【例如】

定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），並設定其背景色為橙色：

<!--html程式碼-->
<div class="wrapper">
  <div>我是一個塊元素，我是.wrapper的第一個子元素</div>
  <p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p>
  <p>我是一個段落元素</p>
  <div>我是一個塊元素</div>
</div>

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改變第一個段落的背景為橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

效果：
這裡寫圖片描述

②last-of-type選擇器

用來定位一個父元素下的某個型別的最後一個子元素。

【例如】

通過“:last-of-type”選擇器，將容器“div.wrapper”中最後一個段落元素背景設定為橙色（這個段落不是“div.wrapper”容器的最後一個子元素）：

 .wrapper > p:last-of-type{
  background: orange;
}

③nth-of-type(n)選擇器

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種型別的子元素(順序)。

在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”引數也一樣，可以是具體的整數，也可以是表示式，還可以是關鍵詞。

【例如】

通過“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數段數的背景設定為橙色：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

④nth-last-of-type(n)選擇器

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素型別，但它的起始方向是從最後一個子元素開始(逆序)。

【例如】

通過“:nth-last-of-type(n)”選擇器將容器“div.wrapper”中的倒數第三個段落背景設定為橙色。：

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

（4）only-child & only-of-type

①only-child選擇器

匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

【例如】

通過“:only-child”選擇器，來控制僅有一個子元素的背景樣式：

<!--html程式碼-->
<div class="post">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
</div>
<div class="post">
  <p>我是一個段落</p>
</div>

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

效果：
這裡寫圖片描述

②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 class="wrapper">
  <p>我是一個段落</p>
</div>

.wrapper p:only-of-type{
  background: orange;
}

效果：
這裡寫圖片描述

【CSS3】選擇器（屬性 & 結構性偽類）--慕課網【學習總結】

1.屬性選擇器

【例如】

2.結構性偽類選擇器

（1）root & not & empty & target

①root

【例如】

②not

【例如】

③empty

【例如】

④target

【例如1】

【分析】

【例如2】

（2）first-child & last-child & nth-child(n) & nth-last-child(n)

①first-child

【例如】

②last-child

【例如】

③nth-child(n)

【經驗與技巧】

【例如】

④nth-last-child(n)

【例如】

（3）first-of-type & last-of-type & nth-of-type(n) & nth-last-of-type(n)

①first-of-type選擇器

【例如】

②last-of-type選擇器

【例如】

③nth-of-type(n)選擇器

【例如】

④nth-last-of-type(n)選擇器

【例如】

（4）only-child & only-of-type

①only-child選擇器

【例如】

②only-of-type選擇器

【例如】

相關推薦