CSS的僞類和僞元素

時間 2019-11-11

標籤 css 元素欄目 CSS 简体版

原文原文鏈接

僞類

W3C："W3C" 列指示出該屬性在哪一個 CSS 版本中定義（CSS1 仍是 CSS2）。css

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。	2

錨僞類

在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。html

 {color: #FF0000}		/* 未訪問的連接 */
 {color: #00FF00}	/* 已訪問的連接 */
 {color: #FF00FF}	/* 鼠標移動到連接上 */
 {color: #0000FF}	/* 選定的連接 */
a:linka:visiteda:hovera:active

親自試一試瀏覽器

提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。字體

提示：在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。url

提示：僞類名稱對大小寫不敏感。spa

僞類與 CSS 類

僞類能夠與 CSS 類配合使用：ssr

a : visited {color: #FF0000}

<a class="" href="css_syntax.asp">CSS Syntax</a>.redred

CSS2 - :first-child 僞類

您能夠使用 :first-child 僞類來選擇元素的第一個子元素。這個特定僞類很容易遭到誤解。code

提示：最多見的錯誤是認爲 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。該選擇器會匹配這樣的p元素：該p元素是其父元素的第一個子元素orm

註釋：必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。htm

CSS2 - :lang 僞類

:lang 僞類使你有能力爲不一樣的語言定義特殊的規則。在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型：

<html>
<head>

<style type="text/css">

</style>

</head>

<body>
<p>文字<q >段落中的引用的文字</q>文字</p>
</body></html>q:lang(no)
   {
   quotes: "~" "~"
   }lang="no"

僞元素

W3C："W3C" 列指示出該屬性在哪一個 CSS 版本中定義（CSS1 仍是 CSS2）。

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素以前添加內容。	2
:after	在元素以後添加內容。	2

CSS 僞元素用於向某些選擇器設置特殊效果。

語法

僞元素的語法：

selector:pseudo-element {property:value;}

CSS 類也能夠與僞元素配合使用：

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

:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。

在下面的例子中，瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：實例

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

註釋："first-line" 僞元素只能用於塊級元素。

註釋：下面的屬性可應用於 "first-line" 僞元素：

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 僞元素

"first-letter" 僞元素用於向文本的首字母設置特殊樣式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

註釋："first-letter" 僞元素只能用於塊級元素。

註釋：下面的屬性可應用於 "first-letter" 僞元素：

font
color
background
margin
padding
border
text-decoration
vertical-align (僅當 float 爲 none 時)
text-transform
line-height
float
clear

僞元素和 CSS 類

僞元素能夠與 CSS 類配合使用：

  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>
p.article:first-letter

上面的例子會使全部 class 爲 article 的段落的首字母變爲紅色。

多重僞元素

能夠結合多個僞元素來使用。

在下面的例子中，段落的第一個字母將顯示爲紅色，其字體大小爲 xx-large。第一行中的其他文本將爲藍色，並以小型大寫字母顯示。段落中的其他文本將以默認字體大小和顏色來顯示：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

CSS2 - :before 僞元素

":before" 僞元素能夠在元素的內容前面插入新內容。

下面的例子在每一個 <h1> 元素前面插入一幅圖片：

h1:before
  {
  content:url(logo.gif);
  }

CSS2 - :after 僞元素

":after" 僞元素能夠在元素的內容以後插入新內容。

下面的例子在每一個 <h1> 元素後面插入一幅圖片：

h1:after
  {
  content:url(logo.gif);
  }

1. css僞類和僞元素
2. CSS僞類和僞元素
3. css—僞類和僞元素
4. css僞類和僞元素的學習
5. CSS中的僞類和僞元素
6. css中的僞類和僞元素
7. CSS - 僞類和僞元素的區別
8. CSS僞類和僞元素的區別
9. CSS 僞類與僞元素
10. CSS僞類與僞元素
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 僞造ICMP數據包的Ethernet層 - TCP/IP教程
• 適用於PHP初學者的學習線路和建議
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。