如何改變css偽元素的樣式-css教學-PHP中文網

如何改變css偽元素的樣式

angryTom

發布： 2020-02-24 18:14:00

轉載

4071 人瀏覽過

本篇文章介紹如何改變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中文網其他相關文章！