一、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");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69755.html
標籤：Html/Css
上一篇：Re：萌娘百科上的黑幕實作
下一篇：CSS中元素的顯示模式