标签：css 统计 htm 伪元素 跳转 介绍 after html5 type
利用html5和css3开发出炫酷的网页，那么对于一个web前端开发者，css3也是必须要掌握的，下面和大家讨论一下css3中伪类选择器和伪元素。
类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：
p.left{text-align: left}
p.rigth{text-align: right}
伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。
最常见的伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 */
a:visited{ color: #87b291 } /* 已被访问的链接 */
a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */
a:active{ color: #55b28e } /* 正在被点击的链接 */
伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}
在CSS中，主要有四个伪元素选择器
1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。
结构性伪类选择器root、not、empty和target
1）、root选择器
root选择器将样式绑定到页面的根元素中。
2）、not选择器
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
3）、empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4）、target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
2）、last-child选择器
last-child单独指定最后一个子元素的的样式。
3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素
选择器nth-of-type和nth-last-of-type
1）、在使用nth-child和nth-last-child时产生的问题
在案例中指定奇数文章的标题背景为黄色，偶数文章的标题为绿色。
<div>
<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>
<h2>标题</h2>
<p>内容</p>
... ...
</div>
2）、使用nth-of-type和nth-last-of-type
nth-of-type和nth-last-of-type在css3中就是用来避免上面这类问题的发生，在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数
兼容性：
nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持，Chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持！
循环使用样式
nth-child(An+B)A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。
only-child选择器
only-child选择器，只对唯一的子元素起作用。
标签：css 统计 htm 伪元素 跳转 介绍 after html5 type
原文地址：https://www.cnblogs.com/bdqnit/p/9221179.html
