首頁 > web前端 > css教學 > 主體

如何改變css偽元素的樣式

angryTom
發布: 2020-02-24 18:14:00
轉載
4038 人瀏覽過

本篇文章介紹如何改變css偽元素樣式的方法,希望對學習前端css的朋友有幫助!

如何改變css偽元素的樣式

一、CSS偽元素

CSS 偽元素用於設定特殊效果。

偽元素的用法如下:

selector:pseudo-element {property:value;}
登入後複製

CSS 類別也可以和偽元素搭配使用

selector.class:pseudo-element {property:value;}
登入後複製

 二、修改偽元素樣式


##( 推薦學習:

CSS教學)

1.問題描述

偽元素範例:

.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
.content::before {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: blue;
}
登入後複製

如果我們想要對修改偽元素的樣式,又該怎麼做呢?因為偽元素在DOM樹中創造了一些抽像元素,但這些抽像元素是不存在於文件語言裡的,也就是不存在於 HTML 原始碼裡,所以並不能透過選擇器來選擇這些偽元素。既然不能選擇偽元素,要怎麼才能修改偽元素的樣式?


2.方案一

透過增加style 標籤重新定義偽元素,實現對偽元素樣式的覆蓋,方法為:###
$(".content").append("<style>.content::before{display:none}</style>");
登入後複製
###但這種方案有個問題,因為對原來的樣式進行了覆蓋,所以會對所有該類別的標籤產生影響。 #########3.方案二#########更優的方案是透過增加新的CSS 類別來對偽元素的某些樣式進行修改,方法如下:### ###1)定義新的CSS 類別。 ######例如增加新的 CSS 類別:###
.change::before {
    background: red;
}
登入後複製
###2)新增類別以修改偽元素樣式。 #########在 JQuery 中使用 id 選擇器和 css 選擇器,再使用 addClass() 進行新增修改,範例如下:###
$("#content1").addClass("change");
登入後複製

以上是如何改變css偽元素的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板