如何改变css伪元素的样式


本文摘自PHP中文网,作者angryTom,侵删。

本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助!

一、CSS伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素的用法如下:

1

selector:pseudo-element {property:value;}

CSS 类也可以和伪元素搭配使用

1

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

二、修改伪元素样式

( 推荐学习:CSS教程 )

1.问题描述

伪元素例子:

1

2

3

4

5

6

7

8

9

10

11

12

13

.content {

    width: 100px;

    height: 100px;

    margin: 0 auto;

    background: black;

}

.content::before {

    content: "";

    width: 20px;

    height: 20px;

    position: absolute;

    background: blue;

}

如果我们想对修改伪元素的样式,又该怎么做呢?因为伪元素在DOM树中创建了一些抽象元素,但这些抽象元素是不存在于文档语言里的,即不存在于 HTML 源码里,所以并不能通过选择器来选择这些伪元素。既然不能选择伪元素,那要怎么才能修改伪元素的样式?

阅读剩余部分

相关阅读 >>

详解css contain新特性如何控制页面重绘与重排

了解css中容易被忽略特性,避免一些经常遇到的坑

css怎么让滚动条隐藏

css中的文本属性有哪些

css有哪几种样式

利用css3进行弹性布局时内容对齐的方法详解

深入浅析css 布局和 bfc

resize不是已知的css属性?

css border-bottom-left-radius属性怎么用

css怎么让图片横着排列

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...