CSS 屬性 - 偽類和偽元素的區別

来源:https://www.cnblogs.com/zhugan/archive/2018/01/19/8317630.html
-Advertisement-
Play Games

偽元素和偽類之所以這麼容易混淆,是因為他們的效果類似而且寫法相仿,但實際上 css3 為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。 :Pseudo-classes ::Pseudo-elements 但因為相容性的問題,所以現在大部分還是統一的單冒號,但是拋開相容性 ...


  • 偽元素和偽類之所以這麼容易混淆,是因為他們的效果類似而且寫法相仿,但實際上 css3 為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。

    :Pseudo-classes
    ::Pseudo-elements
    

    但因為相容性的問題,所以現在大部分還是統一的單冒號,但是拋開相容性的問題,我們在書寫時應該儘可能養成好習慣,區分兩者。

  • 區別

  • CSS 偽類用於向某些選擇器添加特殊的效果。
  • CSS 偽元素用於將特殊的效果添加到某些選擇器。
  • 偽類種類

  •  

  • 偽元素種類

  • 對比

    這裡用偽類 :first-child 和偽元素 :first-letter 來進行比較。

  • p>i:first-child {color: red}
    <p>
        <i>first</i>
        <i>second</i>
    </p>
    

     //偽類 :first-child 添加樣式到第一個子元素
    如果我們不使用偽類,而希望達到上述效果,可以這樣做:

    .first-child {color: red}
    <p>
        <i class="first-child">first</i>
        <i>second</i>
    </p>
    

    即我們給第一個子元素添加一個類,然後定義這個類的樣式。那麼我們接著看看為元素:

     
    p:first-letter {color: red}
    <p>I am stephen lee.</p>
  •  //偽元素 :first-letter 添加樣式到第一個字母
    那麼如果我們不使用偽元素,要達到上述效果,應該怎麼做呢?

    .first-letter {color: red}
    <p><span class='first-letter'>I</span> am stephen lee.</p>
    

    即我們給第一個字母添加一個 span,然後給 span 增加樣式。
    兩者的區別已經出來了。那就是:

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端框架層出不窮,不過萬變不離其宗,就是從MVC過渡到MVVM。從數據映射到DOM,angular中用的是watcher對象,vue是觀察者模式,react就是state了。 React通過管理狀態實現對組件的管理,通過this.state()方法更新state。當this.setState()被調 ...
  • 在網上找了好久針對react-native的測試方法,但是沒有找到靠譜的方式。要麼很淺只是跑了一下官方的例子,要麼就是版本有點老舊,照著無法進行。jest提供的react-native例子很少,而enzyme提供的react-native-mock庫也是各種報錯,讓人很是絕望。於是乎在搜索到的信息指 ...
  • 屬性 屬性名 屬性類型 描述說明 預設值 language String 多語言設置,使用時需提前引入\locales文件夾下對應的語言文件,中文zh,引入語言文件必須放在fileinput.js之後 'en' showCaption Boolean 是否顯示被選文件的簡介 true showBro ...
  • Skip to content This repository Search Pull requests Issues Marketplace Explore @VIVI863628 Sign out Unwatch 1 Star 0 Fork 0 VIVI863628/PouchDB Code I... ...
  • JavaScript數組去重 1、原型去重法。通過prototype找到數組的源性對象Array,在數組的原型上添加unique()方法。需要使用的時候使用 點 “ . ” 進行連接。 優點:擴展性比較高,復用性比較高。 缺點:通過給數組對象擴展,新增方法,導致數組結構中有新增了一個方法。此時如果用 ...
  • 個人JavaScript小工具,每天熟記一點點。多練習,達到熟練的效果。 ...
  • 閉包算是javascript中一個比較難理解的概念,想要深入理解閉包的原理,首先需要搞清楚其他幾個概念: 一、棧記憶體和堆記憶體 學過C/C++的同學可能知道,電腦系統將記憶體分為棧和堆兩部分(大學的基礎課,忘掉的趕緊重新撿起來)。 棧記憶體(連續的存儲空間,類似數據結構中的棧):主要用來存放數值、字元、 ...
  • Vue.js之路由 以前的跳轉都是使用a標簽,a標簽里有一個屬性叫href,給他一個對應的網路地址或者一個路徑的話,它就會幫助跳轉到對應的頁面。 Vue.js的路由,其實跟我們的a標簽實現的功能是一樣的,我們也是實現一個對應的跳轉,只不過路由的性能更優化,a標簽不管點擊多少次,都會發生對應的網路請求 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...