今天小编跟大家讲解下有关css3 伪元素和伪类选择器详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3 伪元素和伪类选择器详解 的相关资料，希望小伙伴们看了有所帮助。
伪类选择器：CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种 `如a:link|a:visited|a:hover|a:active`
提示：在 CSS 定义中 a:hover 必须被置于 a:link 和 a:visited 之后 才是有效的。
提示：在 CSS 定义中 a:active 必须被置于 a:hover 之后 才是有效的。
伪元素选择器：并不是针对真正的元素使用的选择器 而是针对CSS中已经定义好的伪元素使用的选择器。
CSS中有如下四种伪元素选择器：· first-line:为某个元素的第一行文字使用样式；· first-letter:为某个元素中的文字的首字母或第一个字使用样式；· before:在某个元素之前插入一些内容；· after: 在某个元素之后插入一些内容； 使用方法：选择器：伪元素{样式}
结构性伪类选择器1. 四个最基本的：root、not、empty、target
2. first-child、last-child、nth-child、nth-last-child、 nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
3. nth-of-type、nth-last-of-type 4. 循环使用样式 5. only-child
:root()选择器 从字面上我们就可以很清楚的理解是根选择器 他的意思就是匹配元素E所在文档的根元素。在HTML文档中 根元素始终是<html>。“:root”选择器等同于<html>元素
:not()选择器称为否定选择器 和jQuery中的:not选择器一模一样 可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素 这里没有内容指的是一点内容都没有 哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式 该样式只在用户点击了页面中的超链接 并且跳转到target元素后起作用
“:first-child()”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素 记住是子元素 而不是后代元素。
:nth-child()选择某个元素的一个或多个特定的子元素；:nth-last-child()从某父元素的最后一个子元素开始计算 来选择特定的元素。
看下面一个例子：
复制代码代码如下: <style type="text/css"> div p:nth-last-child(2){ color:red; } </style></head><body> <div> <p>前端</p> <p>开发</p> <p>工程</p> <p>软件</p> <p>工程</p> </div></body>
:nth-child()可以选择某个的一个或多个特定的子元素 你可以按这种方式进行选择： :nth-child(length); :nth-child(n); :nth-child(n*length) :nth-child(n+length); :nth-child(-n+length) :nth-child(n*length+1); //上面length为整数
值得注意的是：nth-child(0)没有选择元素 nth-child(1)选择第一个元素。
复制代码代码如下: <style type="text/css"> *{list-style:none;}; .demo { width: 400px; padding: 10px; } .demo li { padding: 5px; float: left; margin-right:4px; } .demo li a { float: left; display: block; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: white; text-decoration: none; } .demo li:nth-child(1){ background:#01FEFE; } .demo li:nth-child(2n){ background:#4679BD; }</p><p> </style></head><body><div class="demo"> <ul> <li class="one"id="first"><a href="https://www.aidi.net.cn//css/">1</a></li> <li class="two"><a href="https://www.aidi.net.cn//css/">2</a></li> <li class="three"><a href="https://www.aidi.net.cn//css/">3</a></li> <li class="four"><a href="https://www.aidi.net.cn//css/">4</a></li> <li class="five"><a href="https://www.aidi.net.cn//css/">5</a></li> <li class="six"><a href="https://www.aidi.net.cn//css/">6</a></li> <li class="seven"><a href="https://www.aidi.net.cn//css/">7</a></li> <li class="eight"><a href="https://www.aidi.net.cn//css/">8</a></li> <li class="nine"><a href="https://www.aidi.net.cn//css/">9</a></li> <li class="ten"id="last"><a href="https://www.aidi.net.cn//css/">10</a></li></ul></div>
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似 不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时 使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
":only-child"表示的是一个元素是它的父元素的唯一一个子元素。
伪元素：CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中 他对伪元素进行了一定的调整 在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素 到目前来说 这两种方式都是被接受的 也就是说不管使用哪种写法所起的作用都是一样的 只是一个书写格式不同而以。
::first-line选择元素的第一行 比如说改变每个段落的第一行文本的样式 我们就可以使用这个p::first-line {font-weight:bold;}
::before和::after这两个主要用来给元素的前面或后面插入内容 这两个常用"content"配合使用 见过最多的就是清除浮动 复制代码代码如下: .clearfix:before, .clearfix:after { content:"."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
::selection用来改变浏览网页选中文的默认效果
来源：爱蒂网
