本篇文章给大家带来的内容是关于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
无标题文档 input { width: 100px; height: 30px; color: #000; } input:enabled { color: red; } input:disabled { color: blue; }
02_表单状态.html
无标题文档 input:checked { width: 100px; height: 100px; }
03_获取焦点.html
input:focus{ background: pink; } p:focus{ background: pink; }
04_模拟单选框.html
无标题文档 label { float: left; margin: 0 5px; overflow: hidden; position: relative; } label input { position: absolute; left: -50px; top: -50px; } span { float: left; width: 50px; height: 50px; border: 3px solid #000; } input:checked~span { background: red; }
四、结构性伪类
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; }*/
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
p1
p2
p3
p1
p2
p3
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; }
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中的选择器种类总结及效率比较示例
以上就是CSS中的伪类选择器和伪元素选择器的代码分析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611411.html
微信扫一扫 
支付宝扫一扫 
