天天看點
傳回

CSS學習筆記（十）CSS 組合器，僞類，僞元素CSS 組合器CSS 僞類CSS 僞元素

CSS 組合器

CSS 組合器

組合器是解釋選擇器之間關系的某種機制。

CSS 選擇器可以包含多個簡單選擇器。在簡單選擇器之間，我們可以包含一個組合器。

CSS 中有四種不同的組合器：

後代選擇器 (空格)
子選擇器 (>)
相鄰兄弟選擇器 (+)
通用兄弟選擇器 (~)

後代選擇器

後代選擇器比對屬于指定元素後代的所有元素。

下面的例子選擇

<div>

元素内的所有

<p>

元素：（包含在裡面的所有p元素）

執行個體

div p {
  background-color: yellow;
}

子選擇器

子選擇器比對屬于指定元素子元素的所有元素。

下面的例子選擇屬于

<div>

元素子元素的所有

<p>

元素：（隻包含子類的p元素）

執行個體

div > p {
  background-color: yellow;
}

相鄰兄弟選擇器

相鄰兄弟選擇器比對所有作為指定元素的相鄰同級的元素。

兄弟（同級）元素必須具有相同的父元素，“相鄰”的意思是“緊随其後”。

下面的例子選擇緊随

<div>

元素之後的所有

<p>

元素：（同級且緊随其後）

執行個體

div + p {
  background-color: yellow;
}

通用兄弟選擇器

通用兄弟選擇器比對屬于指定元素的同級元素的所有元素。

下面的例子選擇屬于

<div>

元素的同級元素的所有

<p>

元素：（同級的所有p元素）

執行個體

div ~ p {
  background-color: yellow;
}

CSS 僞類

什麼是僞類？

僞類用于定義元素的特殊狀态。

例如，它可以用于：

設定滑鼠懸停在元素上時的樣式
為已通路和未通路連結設定不同的樣式
設定元素獲得焦點時的樣式

文法

僞類的文法：

selector:pseudo-class {
  property: value;
}

錨僞類

連結能夠以不同的方式顯示：

執行個體

/* 未通路的連結 */
a:link {
  color: #FF0000;
}

/* 已通路的連結 */
a:visited {
  color: #00FF00;
}

/* 滑鼠懸停連結 */
a:hover {
  color: #FF00FF;
}

/* 已選擇的連結 */
a:active {
  color: #0000FF;
}

詳細參照css連結CSS學習筆記（七）

僞類和 CSS 類

僞類可以與 CSS 類結合使用：

當您将滑鼠懸停在例子中的連結上時，它會改變顔色：

執行個體

a.highlight:hover {
  color: #ff0000;
}

懸停在

<div>

 上

在

<div>

元素上使用 :hover 僞類的執行個體：

執行個體

div:hover {
  background-color: blue;
}

簡單的工具提示懸停

把滑鼠懸停到

<div>

元素以顯示

<p>

元素（類似工具提示的效果）：

執行個體

（滑鼠懸停在div上會出現p的内容）

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - :first-child 僞類

:first-child

僞類與指定的元素比對：該元素是另一個元素的第一個子元素。

比對首個

<p>

元素

在下面的例子中，選擇器比對作為任何元素的第一個子元素的任何

<p>

元素：

執行個體

p:first-child {
  color: blue;
}

比對所有

<p>

 元素中的首個

<i>

 元素

在下面的例子中，選擇器比對所有

<p>

元素中的第一個 元素：

執行個體

p i:first-child {
  color: blue;
}

比對所有首個

<p>

 元素中的所有

<i>

 元素

在下面的例子中，選擇器比對作為另一個元素的第一個子元素的

<p>

元素中的所有

<i>

元素：

執行個體

p:first-child i {
  color: blue;
}

CSS - :lang 僞類

:lang

僞類允許您為不同的語言定義特殊的規則。

在下面的例子中，

:lang

為屬性為

的

<q>

元素定義引号：

執行個體

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

結果：

CSS學習筆記（十）CSS 組合器，僞類，僞元素CSS 組合器CSS 僞類CSS 僞元素

所有 CSS 僞類：标準僞類索引

CSS 僞元素

什麼是僞元素？

CSS 僞元素用于設定元素指定部分的樣式。

例如，它可用于：

設定元素的首字母、首行的樣式
在元素的内容之前或之後插入内容

文法

僞元素的文法：

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

::first-line

 僞元素

::first-line

僞元素用于向文本的首行添加特殊樣式。

下面的例子為所有

<p>

元素中的首行添加樣式：

執行個體

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

注意：

::first-line

僞元素隻能應用于塊級元素。

以下屬性适用于

::first-line

僞元素：

字型屬性
顔色屬性
背景屬性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter

 僞元素

::first-letter

僞元素用于向文本的首字母添加特殊樣式。

下面的例子設定所有

<p>

元素中文本的首字母格式：

執行個體

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

注意：

::first-letter

僞元素隻适用于塊級元素。

下面的屬性适用于

::first-letter

僞元素：

字型屬性
顔色屬性
背景屬性
外邊距屬性
内邊距屬性
邊框屬性
text-decoration
vertical-align（僅當 "float" 為 "none"）
text-transform
line-height
float
clear

僞元素和 CSS 類

僞元素可以與 CSS 類結合使用：

執行個體

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

上面的例子将以紅色和較大的字型顯示 class=“intro” 的段落的首字母。

多個僞元素

也可以組合幾個僞元素。

在下面的例子中，段落的第一個字母将是紅色，字型大小為 xx-large。第一行的其餘部分将變為藍色，并使用小型大寫字母。該段的其餘部分将是預設的字型大小和顔色：

執行個體

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

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

CSS -

::before

 僞元素

::before

僞元素可用于在元素内容之前插入一些内容。

下面的例子在每個

<h1>

元素的内容之前插入一幅圖像：

執行個體

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

CSS -

::after

 僞元素

::after

僞元素可用于在元素内容之後插入一些内容。

下面的例子在每個

<h1>

元素的内容之後插入一幅圖像：

執行個體

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

CSS -

::selection

 僞元素

::selection

僞元素比對使用者選擇的元素部分。

以下 CSS 屬性可以應用于

::selection

：

color
background
cursor
outline

下例使所選文本在黃色背景上顯示為紅色：

（指的是你的滑鼠選中的部分）

執行個體

::selection {
  color: red; 
  background: yellow;
}

所有 CSS 僞元素：标準僞元素索引

前端學習 css
上一篇: 僞類/僞元素 css
下一篇: Java必須知道的300個問題

繼續閱讀