国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

css 偽類(lèi)與偽元素

1. 偽類(lèi)別與偽元素

#css引入偽類(lèi)別與偽元素概念是為了格式化文檔樹(shù)以外的資訊。也就是說(shuō),偽類(lèi)和偽元素是用來(lái)修飾不在文件樹(shù)中的部分,例如,一句話(huà)中的第一個(gè)字母,或是清單中的第一個(gè)元素。以下分別對(duì)偽類(lèi)別和偽元素進(jìn)行解釋?zhuān)?/p>

  偽類(lèi)別用於當(dāng)已有元素處?kù)兜哪硞€(gè)狀態(tài)時(shí),為其添加對(duì)應(yīng)的樣式,這個(gè)狀態(tài)是根據(jù)用戶(hù)行為而動(dòng)態(tài)變化的。比如說(shuō),當(dāng)使用者懸停在指定的元素時(shí),我們可以透過(guò):hover來(lái)描述這個(gè)元素的狀態(tài)。雖然它和普通的css類(lèi)別相似,可以為現(xiàn)有的元素添加樣式,但是它只有處?kù)禿om樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式,所以稱(chēng)為偽類(lèi)。

  偽元素用於建立一些不在文件樹(shù)中的元素,並為其新增樣式。比如說(shuō),我們可以透過(guò):before來(lái)在一個(gè)元素前面增加一些文本,並為這些文本添加樣式。雖然使用者可以看到這些文本,但是這些文本實(shí)際上不在文件樹(shù)中。


#2. 偽類(lèi)別與偽元素的差異

#  這裡透過(guò)兩個(gè)例子來(lái)說(shuō)明兩者的差異。

  以下是一個(gè)簡(jiǎn)單的html清單片段:

##<ul>

? ?<li>我是第一個(gè)< ;/li> ? ?<li>我是第二</li>

</ul>


#如果想要為第一項(xiàng)新增樣式,可以在為第一個(gè)<li>新增一個(gè)類(lèi),並在該類(lèi)別中定義對(duì)應(yīng)樣式:
  HTML:

<ul>


? ?<li class="first-item">我是第一個(gè)</li>

? ?<li>我是第二個(gè)</li>

</ul>

?  CSS:


#li.first-item {color: orange}

  如果不用加入類(lèi)別的方法,我們可以透過(guò)給設(shè)定第一個(gè)<li>的:first-child偽類(lèi)別來(lái)為其新增樣式。這時(shí)候,被修飾的<li>元素依然處?kù)段臋n樹(shù)。
  HTML:

<ul>


? ?<li>我是第一個(gè)</li>

<li>我是第二</li>

#</ul>

###  CSS:##### ####li:first-child {color: orange}############  下面是另一個(gè)簡(jiǎn)單的html段落片段:#########<p>Hello World, and wish you have a good day!</p>##########

  如果想要為該段落的第一個(gè)字母添加樣式,可以在第一個(gè)字母中包裹一個(gè)<span>元素,並設(shè)定該span元素的樣式:

  HTML:

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

#  CSS:

.first?{font-size: 5em;}

#  如果不建立一個(gè)<span>元素,我們可以透過(guò)設(shè)定<p>的:first-letter偽元素來(lái)為其添加樣式。這時(shí)候,看起來(lái)好像是創(chuàng)建了一個(gè)虛擬的<span>元素並添加了樣式,但實(shí)際上文檔樹(shù)中並不存在這個(gè)<span>元素。

  HTML:

<p>Hello World, and wish you have a good day!</p>

  CSS :

p:first-letter {font-size: 5em;}

  從上述範(fàn)例可以看出,偽類(lèi)的操作物件是文檔樹(shù)中已有的元素,而偽元素則建立了一個(gè)文檔數(shù)外的元素。因此,偽類(lèi)別與偽元素的差別在於:有沒(méi)有建立一個(gè)文檔樹(shù)以外的元素。



偽類(lèi)別與偽元素混淆的由來(lái)?最混淆的,可能是大部分人都將:before 和:after 這樣的偽元素隨口叫做偽類(lèi),而且即使在概念混淆的情況下,實(shí)際使用上也毫無(wú)問(wèn)題——因?yàn)榧词垢拍罨煜?,?duì)真正使用也不會(huì)造成多少麻煩:)?

CSS3規(guī)格中的要求使用雙冒號(hào)(::)表示偽元素,以此來(lái)區(qū)分偽元素和偽類(lèi),例如::before和::after等偽元素使用雙冒號(hào)(::),:hover和:active等偽類(lèi)別使用單冒號(hào)(:)。除了一些低於IE8版本的瀏覽器外,大部分瀏覽器都支援偽元素的雙冒號(hào)(::)表示方法。

偽類(lèi)別與偽元素的用法1011.png

##偽類(lèi)別

1 :link ? ??#選擇未存取的連結(jié)

#2 :visited ? ? ?選擇已存取的連結(jié)

###3 :hover ? ?###選擇滑鼠指標(biāo)在其上浮動(dòng)的元素#########4 : active ? ??###選擇活動(dòng)的連結(jié)#######

5 :focus ? ?選擇取得焦點(diǎn)的輸入欄位

:first - child 偽類(lèi)別

符合元素的第一個(gè)子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
       li:first-child {
       color: orange;
       }
      </style>
<body>
  <ul>
    <li>這里的文本是橙色的</li>
    <li>一些文本</li>
    <li>一些文本</li>
  </ul>
</body>
</html>

:not 偽類(lèi)

##一個(gè)否定偽類(lèi),用來(lái)符合不符合參數(shù)選擇器的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
     li:not(.first-item) {
     color: orange;
     }
    </style>
<body>
  <ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
  </ul>
</body>
</html>

:lang 偽類(lèi)別

:lang比對(duì)設(shè)定了特定語(yǔ)言的元素,設(shè)定特定語(yǔ)言可以透過(guò)為了HTML元素設(shè)定lang=””屬性,設(shè)定meta元素的charset=””屬性,或是在http頭部設(shè)定語(yǔ)言屬性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
     :lang(en) q { quotes: '“' '”'; }
     :lang(fr) q { quotes: '?' '?'; }
     :lang(de) q { quotes: '?' '?'; }
    </style>
<body>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
  <article>
    <q>Lorem ipsum dolor sit amet.</q>
  </article>
</body>
</html>


#偽元素


::before/:before 偽元素

#:before在被選元素前插入內(nèi)容。需要使用content屬性來(lái)指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹(shù)中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
     h1:before {
      content: "Hello ";
     }
    </style>
<body>
  <h1>World</h1>
</body>
</html>

::after/:after 偽元素

#:after在被元素後插入內(nèi)容,其用法和特性與:before相似。

::first-letter/:first-letter 偽元素

##:first -letter匹配元素中文字的首字母。被修飾的首字母不在文檔樹(shù)中。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
     h1:first-letter {
      color:#ff0000;
      font-size:xx-large;
     }
    </style>
<body>
  <h1>World 觀(guān)察第一個(gè)字母</h1>
</body>
</html>

######################::first-line/:first-line 偽元素#### ########:first-line符合元素中第一行的文字。這個(gè)偽元素只能用在區(qū)塊元素中,不能用在內(nèi)聯(lián)元素中。 ###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>實(shí)例</title> 
  <title>php.cn</title>
    <style type="text/css">
     p:first-line {
       background: orange;
     }
    </style>
<body>
  <p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, 
  to set them apart from pseudo-classes. You may see this sometimes in CSS. 
  CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, 
  and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>
##########
繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實(shí)例</title> <title>php.cn</title> <style type="text/css"> li:first-child { color: orange; } </style> <body> <ul> <li>這里的文本是橙色的</li> <li>一些文本</li> <li>一些文本</li> </ul> </body> </html>
提交重置程式碼