css中的僞類

1.僞類的語法

selector:pseudo-class {property:value;}

對應的中文：選擇器：僞類｛屬性：值；｝

 

2.anchor僞類

 1 <style type="text/css">
 2 /*anchor僞類的順序是固定的，不變的*/
 3 /*未訪問時的樣式*/
 4     a:link{color: black;}
 5 /*訪問事後的樣式*/
 6     a:visited{color: pink;}
 7 /*鼠標劃過期的樣式*/
 8     a:hover{color:blue;}
 9 /*點擊時的樣式*/
10     a:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">這是一個連接</a>
16 </body>

 

3.css僞類

css僞類就是css與僞類配合使用。

語法：

selector.class:pseudo-class {property:value;}

 1 <style type="text/css">
 2 /*css僞類就是在選擇器部分增長類選項*/
 3 /*未訪問時的樣式*/
 4     a.css:link{color: black;}
 5 /*訪問事後的樣式*/
 6     a.css:visited{color: pink;}
 7 /*鼠標劃過期的樣式*/
 8     a.css:hover{color:blue;}
 9 /*點擊時的樣式*/
10     a.css:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">這是一個連接，可是不會有樣式</a>
16 <a href="#" class="css">這是一個連接，會有樣式</a>
17 </body>

 

css:first-child:

給相同標籤的第一次出現的匹配樣式，這個標籤能夠是被嵌套在其餘標籤裏面。

 1 <style type="text/css">
 2 p:first-child{
 3     color: blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <div><p>這是第一次出現的p標籤,有樣式</p></div>
10 <p>這是第二次出現的p標籤，無樣式</p>
11 
12 </body>

更高級的模式：

能夠設置其子類的樣式

 1 <style type="text/css">
 2 p>i:first-child{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p>這是<i> 第一次 </i>第一次有樣式</p>
10 <p>這是<i> 第二次 </i>第二次有樣式</p>
11 
12 </body>

 

另外一種方式：匹配相同元素的第一個下的某個全部的元素

 1 <style type="text/css">
 2 p:first-child i{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p><i>有樣式</i><i>有樣式</i></p>
10 <p><i>無樣式</i><i>無樣式</i></p>
11 
12 </body>

 

4.lang僞類

lang僞類能夠讓你本身定義本身的語言，筆者發現各個教程和文檔的定義比較難理解，可是觀看代碼比較直觀一點。

 1 <style type="text/css">
 2 q:lang(no){
 3     quotes: "/" "/";
 4 }
 5 
 6 p:lang(it){
 7     background-color: yellow;
 8 }
 9 </style>
10 
11 </style>
12 </head>
13 <p>你能夠定義<q lang="no">本身</q>的語言</p>
14 <p lang="it">你能夠定義本身的語言</p>
15 
16 </body>

 

 

寫在後面

僞類和僞元素的用法大體相同，這裏就再也不介紹了，有興趣的同窗能夠查看相關文檔教程。