AI智能
改变未来

css伪类与伪元素笔记


1、伪类

伪类:专门用来表示元素的一种特殊状态

常用伪类选择器

(1)a标签:a:link/:visited/:hover/:active(注意顺序)

(2):focus 获得焦点

(3):first-child/:last-child/:nth-child(number)

关于a标签:

a:link,定义正常链接的样式; 
a:visited,定义已访问过链接的样式; 
a:hover,定义鼠标悬浮在链接上时的样式; 
a:active,定义鼠标点击链接时的样式。 
1 .定义超链接样式的顺序:link-visited-hover-active,也就是我们经常说到的LVHA原则(”爱恨原则“)

我们可以通过颜色变化来研究a标签不同伪类的状态变化

[code]  /* css样式 */a:link{/*这里的:link可以省略*/color:red;}a:visited{color:green;}a:hover{color:yellow;}a:active{color: blue;}<!--html结构--><a href=\"#\">单击我跳转</a>

2、伪元素

(1)CSS伪元素与伪类区别:
        css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分。

        伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
        它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

        伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,
        并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

(2)伪元素&伪类的特点:
        伪元素和伪类都不会出现在源文档或者文档树中
        伪类允许出现在选择器的任何位置,而一个伪元素只能跟在选择器的最后一个简单选择器后面
        伪元素名和伪类名都是大小写不敏感的
        有些伪类是互斥的,而其它的可以同时用在一个元素上。(在规则冲突的情况下,常规层叠顺序决定结果)

(3)伪元素:

        :before/:after/:first-letter/:first-line : 前面可以是1个冒号也可以是双冒号
        ::selection/::placeholder/::backdrop : 前面只能是双冒号

举例:

[code]  <style>p:first-letter{font: 60px 黑体;color: #2c3cff;text-indent: 2em;}p:first-line{text-decoration: underline;}p:before{content: \'★\';}p::after{content: \'……\';}</style><p>伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。</p>

效果:

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css伪类与伪元素笔记