CSS中的伪类选择器和伪元素选择器的代码分析

web前端|css教程

伪类选择器,伪元素选择器

web前端-css教程

网络舆情预警系统源码,vscode运行arduino,收购 ubuntu,Tomcat 网站布置,sqlite主键自增语录,jq图片上传裁剪插件,大平台小前端组织框架图,爬虫出现 u7cb,交友 php 源码,seo优化营销软件,网站配色模板,转盘网页代码,ecshop 下载 别人 模板lzw

本篇文章给大家带来的内容是关于CSS中伪类选择器以及伪元素选择器的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

电视 企业网站模板源码,ubuntu屏蔽原生驱动,通用爬虫管理平台,php中删除数组中的重复元素,seo文章引流lzw

A、链接伪类

asp源码 企业内部网,ubuntu的语言图标,tomcat启动越来越慢了,学习爬虫电脑配置,php发展,榆林seo排名lzw

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

B、动态伪类

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

C、隐私与:visited选择器

1、隐私与:visited选择器

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接： color background-color border-color

D、表单相关伪类

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; }

D、结构性伪类

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

* {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

p {height: 200px;background: #abcdef; } p:empty {background: #f00; }

Second

Third

E、伪元素

1、伪元素

/*伪元素*/ ::after ::before ::firstLetter ::firstLine ::selection

2、代码实例：

after.html

p {width: 300px;height: 100px;border: 1px solid #000; } p::after {content: "我在内容的后面"; }

伪元素

before.html

p {width: 300px;height: 100px;border: 1px solid #000; } p::before {content: "我在内容的前面"; }

伪元素

firstLetter.html

p {width: 500px;margin: 0 auto;font-size: 12px; } p::first-letter {color: #f00;font-size: 24px;font-weight: bold; }

sssss

firstLine.html

p {width: 500px;margin: 0 auto; } p::first-line {color: #f00;font-weight: bold; }

sssss

sssss

sssss

selection.html

p::selection {background: red;color: pink; }

SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

CSS中的选择器种类总结及效率比较示例

如果觉得《CSS中的伪类选择器和伪元素选择器的代码分析》对你有帮助，请点赞、收藏，并留下你的观点哦！