CSS中偽類和偽元素的詳細介紹（程式碼範例）-css教學-PHP中文網

(2)結構性偽類是css3新增選擇器

(2) 畫分割線

首頁

web前端

css教學

CSS中偽類和偽元素的詳細介紹（程式碼範例）

不言

Jan 24, 2019 am 10:13 AM

css css3

這篇文章帶給大家的內容是關於CSS中偽類別和偽元素的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、偽類

偽類包含兩種：狀態偽類（UI 偽類）和結構性偽類。

(1)狀態偽類別是基於元素目前狀態進行選擇的。

在與使用者的互動過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。

常見的狀態偽類別主要包括：

:link 套用於未被存取過的連結；
:hover 套用於滑鼠懸停到的元素；
:active應用於被啟動的元素；
:visited 應用於被訪問過的鏈接，與:link互斥。
:focus 應用於擁有鍵盤輸入焦點的元素。
:target 應用在連結點擊後指向元素

前4 個偽類別的特指度相同，如果不按照這裡列出的順序使用它們，瀏覽器可能不會顯示預期結果。為了好記，可以這麼想：「LoVe? HA!」大寫字母就是每個偽類的頭一個字母。

input:focus {border:1px solid blue;}

登入後複製

會在遊標位於 input 欄位時，為該欄位新增一個藍色邊框。這樣可以讓使用者明確地
地知道輸入的字元會出現在哪裡。

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

登入後複製

會在使用者點擊連結轉向 ID 為 more_info的元素時，為該元素新增淺灰色背景。

(2)結構性偽類是css3新增選擇器

利用dom樹進行元素過濾，透過文件結構的互相關係來匹配元素，能夠減少class和id屬性的定義，使文檔結構更簡潔。

常見的包括：

:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最後一個子元素；
:nth-child() 選擇某個元素的一個或多個特定的子元素；
:nth-last-child() 選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-child 選擇的元素是它的父元素的唯一一個子元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裡面沒有任何內容。

二、偽元素

偽元素是對元素中的特定內容進行操作，而不是描述狀態。它的操作層次比偽類更深一層，因此動態性比偽類低很多。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中！

常見的偽元素選擇器包括：

:first-letter 選擇元素文字的第一個字（母）。
:first-line 選擇元素文字的第一行。
:before 在元素內容的最前面新增內容。
:after 在元素內容的最後面新增內容。

三、注意

單冒號(:)用於CSS3 偽類，雙冒號(::)用於CSS3 偽元素，為了相容於某些瀏覽器，一般都採用單冒號

相容性的問題，交給postcss去做。本文並未涉及相容性的寫法，包括前綴問題，可以交給autoprefixer去做。（這句話啥意思沒懂，以後看看說的啥）

偽類（結構偽類）的效果可以透過添加一個實際的類別來達到，而偽元素的效果則需要透過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。

四、偽元素的使用

（1）清除浮動

.clear:after {
content: '';
display: block;
clear: both;
}

登入後複製

(2) 畫分割線

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

登入後複製

以上是CSS中偽類和偽元素的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7909

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。