學習CSS之如何改變CSS偽元素的樣式

一、CSS偽元素

　　CSS 偽元素用於向某些選擇器設置特殊效果。

　　偽元素的用法如下：

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;
}

　　如果我們想對修改偽元素的樣式，又該怎么做呢？因為偽元素在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");