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>
效果: