CSS3選擇器學習筆記1

學習CSS3新的選擇器，對于移動前端來講，有時候會有事半功倍的效果，本節學習通用符匹配文件類型:[att^="val"]，刪除空文本標簽:empty，否定選擇器:not，第一個子節點:first-child，最后一個子節點:last-child，某種規律的子節點:nth-child(n)，根節點:root等。

屬性選擇器

在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴展，新增了3個屬性選擇器，使得屬性選擇器有了通配符的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示： 56653eba0001b07004610215 ?實例展示： 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;
}
結果顯示： 53202e050001c07e03820068

結構性偽類選擇器—root

:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。 示例演示： 通過“:root”選擇器設置背景顏色 HTML代碼： 
<div>:root選擇器的演示</div>
CSS代碼： 
:root {
  background:orange;
}
演示結果： 531eb1d90001735d01560050 “:root”選擇器等同于<html>元素，簡單點說： :root{background:orange} html {background:orange;} 得到的效果等同。 建議使用:root方法。 另外在IE９以下還可以借助“:root”實現hack功能。

結構性偽類選擇器—not

: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>  ?
演示結果： 531eb2ca00014b5002370177

結構性偽類選擇器—empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格。 示例顯示： 比如說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。 HTML代碼： 
<p>我是一個段落</p>
<p> </p>
<p></p>?
CSS代碼： 
p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}?
演示結果： 531eb55b0001d7d401580126

結構性偽類選擇器—target

:target選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。我們先來上個例子，然后再做分析。 示例展示 點擊鏈接顯示隱藏的段落。 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;
}
演示結果： 53217ea30001103002230101 分析： 1、具體來說，觸發元素的URL中的標志符通常會包含一個#號，后面帶有一個標志符名稱，上面代碼中是：#brand 2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個div元素。 多個url（多個target）處理： 就像上面的例子，#brand與后面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應就可以了。 如下面例子： 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;
}
上面的代碼可以對不同的target對象分別設置不的樣式。

結構性偽類選擇器—first-child

“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。 示例演示 通過“:first-child”選擇器定位列表中的第一個列表項，并將序列號顏色變為紅色。 HTML代碼： 
<ol>
  <li><a href="##">Link1</a></li>
  <li><a href="##">Link2</a></li>
  <li><a href="##">link3</a></li>
</ol>
CSS代碼： 
ol > li{
  font-size:20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ol a {
  font-size: 16px;
  font-weight: normal;
}

ol > li:first-child{
  color: red;
}
演示結果： 531eb8ca0001c5ba01250125

結構性偽類選擇器—last-child

“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“li”的背景色，就可以使用這個選擇器， ul>li:last-child{background:blue;} 示例演示 在博客的排版中，每個段落都有15px的margin-bottom，假設不想讓博客“post”中最后一個段落不需要底部的margin值，可以使用“:last-child”選擇器。 HTML代碼： 
<div class="post">
  <p>第一段落</p>
  <p>第二段落</p>
  <p>第三段落</p>
  <p>第四段落</p>
  <p>第五段落</p>
</div>?
CSS代碼： 
.post {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin: 20px auto;
}
.post p {
  margin:0 0 15px 0;
}

.post p:last-child {
  margin-bottom:0;
}
演示結果： 531eb9cb0001428002760188

結構性偽類選擇器—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的時候，不選擇任何匹配的元素。如下表所示： 531eba56000138aa05870197 案例演示 通過“:nth-child(n)”選擇器，并且參數使用表達式“2n”，將偶數行列表背景色設置為橙色。 HTML代碼： 
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>?
CSS代碼： 
ol > li:nth-child(2n){
  background: orange;
}
演示結果： 531ebac90001750902580228

結構性偽類選擇器—nth-last-child(n)

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“last”，所起的作用和“:nth-child(n)”選擇器有所區別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。 案例演示 選擇列表中倒數第五個列表項，將其背景設置為橙色。 HTML代碼： 
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
  <li>item11</li>
  <li>item12</li>
  <li>item13</li>
  <li>item14</li>
  <li>item15</li>
</ol>?
CSS代碼： 
ol > li:nth-last-child(5){
  background: orange;
}
演示結果： 531ebb7a0001d20b01530286
學習更多：
  1. CSS3屬性：http://www.dlhcomicsnewlegends.com/css3/selectors/index.htm
  2. CSS3手冊：http://www.dlhcomicsnewlegends.com/css3/

相關文章