既然說(shuō)到偽類，這里就用足夠的代碼給表現(xiàn)一下他們的神奇用法。從簡(jiǎn)單到復(fù)雜，可以清晰的看清到偽類的諸多使用方法，對(duì)于有些功能近似的就取其一舉例了：

為第一個(gè)字添加樣式，這里用一個(gè)首字下沉的例子來(lái)演示一下：

中國(guó)是以華夏文明為源泉

p:first-letter{
  display: block;
  float: left;
  margin-right: .2em;
  font-size: 1.7em;
}

為段落的第一行添加樣式：

錦瑟

錦瑟無(wú)端五十弦，一弦一柱思華年。

莊生曉夢(mèng)迷蝴蝶，望帝春心托杜鵑。

滄海月明珠有淚，藍(lán)田日暖玉生煙。

此情可待成追憶？只是當(dāng)時(shí)已惘然。



p:first-line{
  font-weight: bold;
  font-size: 1.7em;
}

設(shè)置文字被選中是的狀態(tài)，還是上面那段文字：

.select::selection{
  background-color: yellowgreen;
}

內(nèi)容為空的元素樣式

我有內(nèi)容

div{
  width: 60px;
  height: 40px;
  background-color: lightgray;
  margin: 5px;
}
div:empty{
  background-color: darkgray;
}

如果中間沒(méi)有內(nèi)容，把href的值作為內(nèi)容：

a:empty:before{
content: attr(href);
}

當(dāng)元素獲得焦點(diǎn)時(shí)的樣式

input[type="text"]:focus{
  border: 1px purple solid;
  box-shadow: 0 0 15px black;
}

被禁用元素的樣式

input:disabled{
  background-color: red;
}
input:enabled{
  background-color: yellow;
}

input[type="checkbox"]:checked{
  outline: 2px solid red;
}
input:read-only{
  background-color: yellow;
}
input:read-write{
  background-color: lightgreen;
}
input:indeterminate{
  outline: 1px solid blue;
}
input[type="email"]:invalid{
  background-color: red;
  color: #fff;
}
input[type="email"]:valid{
  background-color: #lightgreen;
}

:default{
  background-color: green;
}
input:required{
  background-color: yellow;
}
input:optional{
  background-color: orange;
}
input:in-range{
  background-color: lightgreen;
}
input:out-of-range{
  background-color: red;
  color: white;
}

input:indeterminate{
  outline: 1px solid blue;
}

:link 錨點(diǎn)的樣式
:hover 鼠標(biāo)浮動(dòng)在元素上方時(shí)的樣式(任何元素)
active 鼠標(biāo)點(diǎn)擊下去的樣式(任何元素)
:visited 鼠標(biāo)點(diǎn)擊過(guò)后的顏色(任何元素)

百度

a:link{
  text-decoration: none;
  font-weight: bold;
  color: black;
}
a:hover{
  text-decoration: underline;
  color: blue;
}
a:active{
  text-decoration: none;
  color: purple;
}
a:visited{
  text-decoration: none;
  color: darkgray;
}

:first-child 第一個(gè)元素樣式
:last-child 最后一個(gè)元素樣式
:nth-child(n) 第n個(gè)元素樣式(這個(gè)還能玩出花樣的)
:not(selector) 不符合selector選擇器的樣式

ul li{
  list-style: none;
  background-color: skyblue;
  color: white;
  text-align: center;
  width: 100px;
  height: 20px;
  margin: 5px auto;
  float: left;
}
ul li:first-child{
  color: blue;
}
ul li:last-child{
  color: red;
}
ul li:nth-child(3){
  color: darkgreen;
}
ul li:not([name="except"]){
  font-style: italic;
}

/*下面實(shí)現(xiàn)偶數(shù)部分樣式變化*/
ul li:nth-child(2n){  /*2n+1可以表示奇數(shù)的*/
  background-color: blue;
}

/*下面實(shí)現(xiàn)連續(xù)部分樣式變化*/
ul li:nth-child(n+3):nth-child(-n+8){
  background-color: blue;
}
/*
:nth-child(n+3)表示第三個(gè)以后的元素
:nth-child(-n+8)表示第8個(gè)以前的元素
因此這里選擇了選擇第三到第八的元素
*/

:only-child 放在下一節(jié)和:only-of-type比較講解

此外CSS3中:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n)用法與上述相似，作用也一致，其中:nth-last-of-type(n)表示倒數(shù)第n個(gè)元素。type和child的兩種具有以下差別：

//偽代碼



  
div1中的唯一子元素h3
     


  
div2中的第1個(gè)h3
  
div2中的第1個(gè)h4
     
  
div2中的第2個(gè)h3


  
div3中的第1個(gè)h3
   
  
div3中的第1個(gè)h4
   
  
div3中的第2個(gè)h3
   
  
div3中的第2個(gè)h4
   
  
div3中的第3個(gè)h3
   
  
div3中的第3個(gè)h4
   


h3:nth-of-type(2){
  color: #00f;
}
h4:nth-child(4){
  color: #ff0;
}
h4:only-of-type{
  background-color: #ff0;
}
h3:only-child{
  background-color: #f0f;
}

上面例子中還有 :only-child和CSS3中的:only-of-type兩個(gè)偽類，表示多帶帶的元素，也就是前后沒(méi)有與之相同的元素。具體效果見(jiàn)下圖：

:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素(即url中的錨元素)。
下面用target做一個(gè)選項(xiàng)卡的樣式（點(diǎn)擊切換）

  
  

    
內(nèi)容一
    
內(nèi)容二
    
內(nèi)容三
  


#tab .title a{
  float: left;
  text-decoration: none;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border:1px solid black;
}
#tab .title a:nth-child(n+2){
  border-left:none;
}
#tab .content{
  clear:both;
  position:relative;
}
#tab .content li{
  width:302px;
  height:300px;
  border:1px solid black;
  border-top: none;
  background-color: white;
  position:absolute;
  left:0;
  top:0;
}
#tab .content li:target{
  z-index:1;
}

這個(gè)是最值得一提的，在元素的前后添加內(nèi)容，當(dāng)然也可以添加一個(gè)塊元素，這個(gè)塊變化就無(wú)窮了，下面舉幾個(gè)例子：

首當(dāng)其沖的就是清除浮動(dòng)了

  
1
  
2

3
4

*{
  margin:0;
  padding:0;
}
.float{
  width: 40px;
  height: 40px;
  background-color: blue;
  margin: 5px;
  float: left;
  color: yellow;
}
.clr:after{
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;
  display: block;
}

自動(dòng)計(jì)數(shù)

hello
  
world!
  
world!
  
world!
  
world!
  
world!
hello
  
world!
  
world!
  
world!
  
world!
  
world!

h3{
  counter-increment: myNumH3;
  counter-reset: myNumH4;
}
h3:before{
  content: "第"counter(myNumH3)"章 ";
  color: #08f;
}
h4{
  counter-increment: myNumH4;
  margin-left: 20px;
}
h4:before{
  content: "第"counter(myNumH3)"-"counter(myNumH4)"節(jié) ";
  color: #00f;
}

圖片右上角標(biāo)簽:

new

.new,img{
  width: 300px;
  height: 200px;
}
.new span{
  position: relative;
  display: block;
  letter-spacing: 2px;
  font-size:20px;
  width:30px;
  height:20px;
  color: white;
  top: -190px;
  left: 262px;
  z-index:1;
  transform: rotate(45deg);
}
.new:after{
  content:"";
  display:block;
  font-size:20px;
  width: 0;
  height: 0;
  border:solid 35px transparent;
  border-top-color: red;
  border-right-color: red;
  position:relative;
  top: -224px;
  left: 230px;
}

按鈕點(diǎn)擊范圍擴(kuò)大:

按鈕

.button{
  width:80px;
  height: 40px;
  border:2px solid dimgray;
  background-color: dodgerblue;
  color: #202020;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  margin:20px;
}
.enlarge:after{
  content:"";
  display: block;
  height: 60px;
  width: 100px;
  position: relative;
  top: -50px;
  left: -10px;
  background-color: rgba(100, 100, 100, 0.4);/*用顏色表示一下區(qū)域,應(yīng)該透明*/
}

按鈕右上角提示:

按鈕

.cor_num:after{
  content: attr(data-num);
  padding:0;
  line-height: 22px;
  position: relative;
  display: block;
  background-color: red;
  top: -50px;
  left: 68px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  color: white;
  font-size:14px;
}

對(duì)話框樣式

這是一個(gè)對(duì)話框

.dialog{
  background-color: pink;
  border: 2px solid gray;
  text-align: center;
  line-height: 80px;
  width: 150px;
  height: 80px;
  margin-bottom: 40px;
}
.dialog:after{
  content:"";
  display: block;
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  position: relative;
  width:30px;
  height: 30px;
  top: -15px;
  left: 20px;
  transform: rotate(45deg);
}

一個(gè)福，我自己寫(xiě)著玩的

福

.luck{
  float: left;
  width: 100px;
  height: 100px;
  margin:30px;
  margin-bottom: 45px;
}
.luck span{
  color: gold;
  position: relative;
  font-size: 4em;
  width:70px;
  height: 70px;
  transform: rotate(180deg);
  display: block;
  top: -80px;
  left: 16px;
}
.luck:before{
  content:"";
  display:block;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

不足之處請(qǐng)多指點(diǎn)。