这篇文章将为大家详细讲解有关CSS中伪类选择器和伪元素选择器的示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
康平网站建设公司成都创新互联,康平网站设计制作，有大型网站制作公司丰富经验。已为康平上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的康平做网站的公司定做！
本篇文章给大家带来的内容是关于CSS中伪类选择器以及伪元素选择器的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、链接伪类
1、链接伪类
/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
2、代码实例：
01_锚点伪类.html
a{ text-decoration: none; }
a:link{ color: deeppink; }
#test:link{ background: pink; }
点我点我点我
我是p啦
02_锚点伪类.html
a{ text-decoration: none; }
a:link{ color: black; }
a:visited{ color: pink; }
点我点我点我
03_target.html
*{ margin: 0; padding: 0; }
p{ width: 300px; height: 200px; line-height: 200px; background: black; color: pink; text-align: center; display: none; }
:target{ display: block; }
p1
p2
p3
p1
p2
p3
二、动态伪类
1、动态伪类
/*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！
2、代码实例：
#test:hover{ color: pink; }
#test:active{ color: red; }
我是test
三、隐私与:visited选择器
1、隐私与:visited选择器
/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接
： color background-color border-color
四、表单相关伪类
1、表单相关伪类
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
2、代码实例：
01_表单状态.html
无标题文档
02_表单状态.html
无标题文档
03_获取焦点.html
input:focus{ background: pink; }
p:focus{ background: pink; }
04_模拟单选框.html
无标题文档
四、结构性伪类
1、结构性伪类
/*结构性伪类*/index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！
nth-of-type以元素为中心！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not :empty(内容必须是空的，有空格都不行，有attr没关系)
2、代码实例：
/*子元素的标签应该要统一*/
/*ul .item:nth-child(3){
border: 1px solid;
}*/
ul .item:nth-of-type(3){ border: 1px solid; }
/*ul p:nth-of-type(3){
border: 1px solid;
}
ul p:nth-of-type(3){
border: 1px solid;
}
ul li:nth-of-type(3){
border: 1px solid;
}*/
p1
p2
p3
1
2
3
4
5
p1
p2
p3
6
7
8
9
04_not.html
not
* { margin: 0; padding: 0; border: none; }
a { text-decoration: none; color: #333; font-size: 14px; display: block; float: left; width: 100px; height: 30px; }
p { width: 800px; margin: 0 auto; }
p>a:not(:last-of-type) { border-right: 1px solid red; }
first
second
third
fourth
fifth
05_empty.html
empty
p { height: 200px; background: #abcdef; }
p:empty { background: #f00; }
Second
Third
五、伪元素
1、伪元素
/*伪元素*/
::after
::before
::firstLetter
::firstLine
::selection
2、代码实例：
after.html
after
p { width: 300px; height: 100px; border: 1px solid #000; }
p::after { content: "我在内容的后面"; }
伪元素
before.html
before
p { width: 300px; height: 100px; border: 1px solid #000; }
p::before { content: "我在内容的前面"; }
伪元素
firstLetter.html
First-Letter
p { width: 500px; margin: 0 auto; font-size: 12px; }
p::first-letter { color: #f00; font-size: 24px; font-weight: bold; }
sssss
firstLine.html
First-Line
p { width: 500px; margin: 0 auto; }
p::first-line { color: #f00; font-weight: bold; }
sssss
sssss
sssss
selection.html
Selection
p::selection { background: red; color: pink; }
SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection
关于“CSS中伪类选择器和伪元素选择器的示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文题目：CSS中伪类选择器和伪元素选择器的示例
转载注明：
http://kswjz.com/article/gdhgsc.html
