在之前的文章中我们已经了解过选择器的使用, 如果想对同一个元素在不同的状态时,展示不同的效果,则需要使用到今天要讲的伪类选择器
A. 伪类选择器: 是一个以冒号作为前缀,被添加到一个选择器的末尾的关键字;
依据使用的方式,可以分为如下三种类型:
a. 状态类伪类选择器:
:checked; 当表单元素被选中时的样式;
:hover; 当鼠标在元素上时的样式;
:active; 当元素被时的样式; (一般为按下鼠标未松开时的状态)
:focus; 当按TAB使某个元素获得焦点时的样式;(现在一般不对本状态做特殊处理了,因为好少用TAB来切换了)
-----------------------------------------------
对于<a>标签,还有一些特定的状态类伪类选择器
:link; 初始未被点击跳转的状态;
:visited; 已经被点击过的状态;
b. 结构类伪类选择器: :nth-child(n); :nth-last-child(n); :nth-of-type(n); :nth-last-of-type(n); :first-child; :first-of-type;
:nth-child(n); 以伪类选择器前面的选择器选中的元素的所有兄弟元素为基础, 若第n个选择也刚好符合选择器的规则,则应用相应的样式;
:nth-lat-child(n); 规则与nth-child(n)一样,只不过是在兄弟元素中倒着来数
:nth-of-type(n); 这个伪类选择器,只考虑冒号前选择器兄弟元素中的同类元素, 不考虑其它元素;
:nth-last-of-type(n); 在同类元素中倒着来数就好了
:first-child； 等价于 :nth-child(1); 是考虑所有兄弟元素的; 倒着来就是 :last-child; 最后一个
:first-of-type; 等价于 :nth-of-type(1); 不考虑非选择器指定的元素; 倒着一就是 :last-of-type;
c. 属性类伪类选择器:
[attr] 取包含了指定属性的元素;
[attr=value] 取包含了指定属性元素,并且属性值完全等于value的元素
[attr^=value], 取包含了指定属性的元素, 并且属性值是以value开始的元素
[attr~=value] 取包含了指定属性的元素, 并且属笥值中, 独立存在的一部分内容为value
[attr$=value] 取包含了指定属性的元素,并且是以value结束的元素
[attr*=value] 取包含了提定属性的元素性,并且属性中任何位置包含value的元素
B. 伪元素的应用
伪元素, 就是通过::before, :after 在元素的前面或后面创建出来的一个元素,
注意: 由于::before; ::after 生成的伪元素, 包含在元素格式框内(即:开始和结束标签之间)
因此不能应用在替换元素上; 比如 <img> 或 <input>元素.
注意: 伪元素必须要有 content 属性， 哪怕将值设置成空都可以，要不然，伪元素无效；
使用方法： content:"文本内容"; 或 content:url(图牌路径);
注意： 伪元素不会影响结构选择器；
伪元素不会被搜索引擎收录； 不会影响网页的SEO；
原文地址：https://www.cnblogs.com/jieling/p/10975675.html