如何改變css偽元素的樣式

2021-10-04 07:38:09 字數 851 閱讀 8367

一、css偽元素

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

偽元素的用法如下：

selector:pseudo-element
css 類也可以和偽元素搭配使用

selector.class:pseudo-element
二、修改偽元素樣式

1.問題描述

偽元素例子：

.content 


.content::before
如果我們想對修改偽元素的樣式，又該怎麼做呢？因為偽元素在dom樹中建立了一些抽象元素，但這些抽象元素是不存在於文件語言裡的，即不存在於 html 原始碼裡，所以並不能通過選擇器來選擇這些偽元素。既然不能選擇偽元素，那要怎麼才能修改偽元素的樣式？

2.方案一

通過增加 style 標籤以重新定義偽元素，實現對偽元素樣式的覆蓋，方法為：

但這種方案有個問題，因為對原來的樣式進行了覆蓋，所以會對所有該類的標籤產生影響。

3.方案二

更優的方案是通過增加新的 css 類來對偽元素的某些樣式進行修改，方法如下：

1）定義新的 css 類。

例如增加新的 css 類：

.change::before
2）新增新類以修改偽元素樣式。

在 jquery 中使用 id 選擇器和 css 選擇器，再使用 addclass() 進行新增修改，示例如下：

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

jQuery如何改變css偽元素樣式

首先我們看一下css偽元素是什麼 css 偽元素用於向某些選擇器設定特殊效果。偽元素有哪些 first line 偽元素 first line 偽元素用於向文字的首行設定特殊樣式。first letter 偽元素 first letter 偽元素用於向文字的首字母設定特殊樣式。before 偽元素 ...

JQ jQuery改變css偽元素樣式

偽元素是什麼？例如 bofore after 偽元素不是dom，不能直接操作。若有以下html和css，通過操作偽元素改變圖示顏色 glyphicon number before有兩種方法實現 1 通過新增class的方法實現 對於本例子，適用於改變的顏色已知的情況下 table container...

css改變偽元素color CSS 偽元素

css偽元素是用來新增一些選擇器的特殊效果。css偽元素控制的內容和元素是沒有差別的，但是它本身只是基於元素的抽象，並不存在於文件中，所以稱為偽元素。語法偽元素的語法 selector pseudo element css類也可以使用偽元素 selector.class pseudo element...