接下来看一伪元素。
2、伪元素(注重的是元素内容的变化)
伪元素是对特定的内容进行一些个操作,而不是描述元素状态,它控制的相当于就是一个元素,可理解于一个元素的抽象,并不存在于文档结构中。下面看一常用的伪元素会更清晰一点。
常用的伪元素有:
:after - 元素后面添加新内容
:before - 元素前面添加新内容
:firster-letter - 选择元素第一个字母
:firster-line - 选择元素的第一行
关于这些个伪元素实际使用,可以参考我之前的内容。
二、从写法上区别CSS中的伪类和伪元素
CSS3标准规定。
CSS3伪类使用单冒号(:)
CSS3伪元素使用双冒号(::)
通常我们写单冒号before不出错是因为,对于 CSS2 中已经有的伪元素,如 :before,单冒号和双冒号的写法 ::before 作用是一样的。
三、提一下伪元素和伪类的应用
伪元素的应用太多了,这里还包括一些巧用。(具体可以参考之前写的内容)
1、伪元素的应用
用来清除浮动,如下代码所示:
2、伪类的应用
设置ul元素中第二个li元素设置成红色,如下代码所示:
最后总结一下:
伪类注重是的状态的变化,伪元素注重的内容的变化,其中伪元素新添加的内容元素,在用法上跟真正的DOM无本质区别。普通元素可以实现的效果,伪元素也是可以实现的,合理利用,效果可能会更好,代码更精简一些。
閱讀更多 小鄭搞碼事 的文章