本篇文章介紹了改變css偽元素樣式的方法，希望對(duì)學(xué)習(xí)前端css的朋友有幫助！

昌樂ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

一、CSS偽元素

CSS 偽元素用于向某些選擇器設(shè)置特殊效果。

偽元素的用法如下：

selector:pseudo-element {property:value;}

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

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

二、修改偽元素樣式

1.問題描述

偽元素例子：

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

如果我們想對(duì)修改偽元素的樣式，又該怎么做呢？因?yàn)閭卧卦贒OM樹中創(chuàng)建了一些抽象元素，但這些抽象元素是不存在于文檔語(yǔ)言里的，即不存在于 HTML 源碼里，所以并不能通過選擇器來選擇這些偽元素。既然不能選擇偽元素，那要怎么才能修改偽元素的樣式？

2.方案一

通過增加 style 標(biāo)簽以重新定義偽元素，實(shí)現(xiàn)對(duì)偽元素樣式的覆蓋，方法為：

$(".content").append("<style>.content::before{display:none}</style>");

但這種方案有個(gè)問題，因?yàn)閷?duì)原來的樣式進(jìn)行了覆蓋，所以會(huì)對(duì)所有該類的標(biāo)簽產(chǎn)生影響。

3.方案二

更優(yōu)的方案是通過增加新的 CSS 類來對(duì)偽元素的某些樣式進(jìn)行修改，方法如下：

1）定義新的 CSS 類。

例如增加新的 CSS 類：

.change::before {
    background: red;
}

2）添加新類以修改偽元素樣式。

在 JQuery 中使用 id 選擇器和 css 選擇器，再使用 addClass() 進(jìn)行添加修改，示例如下：

$("#content1").addClass("change");

以上就是改變css偽元素樣式的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司其它相關(guān)文章！

分享文章：改變css偽元素樣式的方法-創(chuàng)新互聯(lián)
本文URL：http://www.aaarwkj.com/article2/dohsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、自適應(yīng)網(wǎng)站、云服務(wù)器、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)