css3選擇器（上）

1、給導航加分割線，左右

 .nav li::之前，.nav li::之後{

            內容："";

            位置：絕對；

            以上方：14px；

            高度：25px；

            寬度：1px； 

        }

     

        .nav li::之前{

            左：0；

            背景：-webkit-線性漸變（至底部，#f06254，#ffffff，#f06254）；

            背景：-moz-線性漸進式（至底部，#f06254，#ffffff，#f06254）；

            背景：-o-線性漸進式（至底部，#f06254，#ffffff，#f06254）；

            背景：-ms-線性漸進（至底部，#f06254，#ffffff，#f06254）；

            背景：線性漸進式（至底部，#f06254，#ffffff，#f06254）；

        }

        .nav li::之後{

            右：0；

            背景：-webkit-線性漸變（至底部，#f06254，#bf554c，#f06254）；

            背景：-moz-線性漸進式（至底部，#f06254，#bf554c，#f06254）；

            背景：-o-線性漸進式（至底部，#f06254，#bf554c，#f06254）；

            背景：-ms-線性漸進（至底部，#f06254，#bf554c，#f06254）；

            背景：線性漸進式（至底部，#f06254，#bf554c，#f06254）；

        }

        

        

         .nav li:first-child::before{ 背景：無;}

         .nav li:last-child::after{ background:none;}

 

2、

 

html代碼：

 

我連結是PDF檔案

我的類別名稱是icon

我的標題是更多">我的   css代碼  

 

a[類別^=圖示]{   背景：綠色；

  color:#fff;//定義以

icon

開頭的任何字串

} a[href$=pdf]{

  background: orange;

  color: #fff;定義href以pd​​f結尾任何字串

}

a[title*=more]{

  background: blue;

  color: #fff;定義有title的任何字串

}

例如：

    a[類^=column]{

        background:#fc0001;

        }

    a[href$=doc]{

        background:#007d02;

    }

    a[title*=box]{

        background:#0000fe;

    }

我的背景想變成紅色

我的背景想變成紅色

我的背景想變成紅色

我的背景想變成綠色

我的背景想變成綠色

我的背景想變成藍色

我的背景想變成藍色

我的背景想變成藍色

 

 

3、

結構性偽類選擇器root

:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，

他的意思是匹配元素E所在文檔的根元素。在HTML文件中，根元素總是

（“:root”選擇器等同於元素，簡單點說：

: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代码：

我是一个段落

 

​

CSS代码：

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

Brand

  content for Brand

Brand

 content for jake

Brand

    content for aron

 

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程式碼：

  

1. Link1

  

2. Link2

  

3. link3

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。也就是說，當參數n的值為0時，選擇器將選擇不到任何符合的元素。

HTML

程式碼：

  
1. item1
  
2. item2
  
3. item3
  
4. item4

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)”“選擇器中的” 參數也是一樣，可以是具體的

整數，也可以是表達式，還可以是關鍵字。

例：.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代码：

  

我是一个段落

  

我是一个段落

  

我是一个段落

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元素

  

我是一個Div

  

    

• 我是一個列表項目

  

  

我是一個段落

CSS代碼：

.wrapper > div:only-of-type {

  background: orange;

}