CSS伪类、伪元素 解析
2018-08-15 本文已影响0人
木子方是个小太阳
定义
伪元素：用于将某些特殊的效果添加到某些选择器
伪类：用于向某些选择器添加特特殊的效果
常用伪元素有哪些？
:first-line (用于向文本的首行设置特殊样式,只能用于块级元素)
:first-letter (用于向文本的首字母设置特殊样式,只能用于块级元素)
:before (可以在元素的内容前面插入新内容)
:after(可以在元素的内容之后插入新内容)
:first-child(用于选择元素的第一个子元素。)
常用伪类有哪些？
:link (用于超链接未访问链接)
:visited (用于超链接已未访问链接)
:hover (用于超链接鼠标移动到链接上)
:active(用于超链接选定的链接)
:lang(为不同的语言定义特殊的规则)
:focus(在元素获得焦点时向元素添加特殊的样式,多用于input框，a链接也有)
用法及用途
再看伪类伪元素的最初定义，
伪元素：用于将某些特殊的效果添加到某些选择器
伪类：用于向某些选择器添加特特殊的效果 。
这两句话乍看好像一个意思，我们举例来看：
<style type="text/css">
.content p:first-letter{color:red;}
.content-normal span{color:red;}
</style>
<body>
<div class="content">
<p>我是第测试伪元素</p>
</div>
<div class="content-normal">
<p><span>我</span>是第测试伪元素</p>
</div>
</body>
结果：
2.png
从上面例子我们可以清晰看到：
- 通过伪元素我们可以改变元素样式、内容。
- 伪元素实现的功能我们同样可以通过真正的元素来实现。
- 伪元素抽象的创建了元素。
再看伪类 伪类：用于向某些选择器添加特殊的效果。
a:link {color:#ccc;}
a:visited {color:#ddd;}
a:hover {color:#fff;}
a:link {color:#eee;}
input:focus{border:3px solid red;}
通过常用的伪类我们可以看出，伪类多为改变元素的状态而应用的样式，比如，active、hover、focus这些。通过添加元素不能实现这些特殊的效果。
css标准有这样一句话，翻译为 “css引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化”。
比如伪元素，既然伪元素能做到的功能子元素都能实现，为什么还会存在呢？因为有些时候为了改变样式就改变html结构，这样的做法不够干净，也不符合内容和表现分离的初衷。
所以能用样式解决的UI问题，我们尽量不添加dom元素。
总结
- 1、伪元素和伪类都用于向选择器添加特殊的效果。
- 2、伪元素和伪类的区别在于是否抽象的创建了元素。
- 3、伪元素和伪类都不存在于真实的DOM结构中。
- 4、伪元素在一个选择器中只能出现一次，且只能出现在末尾。
- 5、伪元素和标签，伪类和类具有相同的优先级。
