伪类
同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类，伪类分为UI伪类和结构化伪类。
UI伪类
CSS中已经定义好的选择器,不能随便取名
UI伪类都比较简单常用
:link 表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。
:visited 表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
:hover 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。
在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
结构化伪类（IE低版本不行）
结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式
先问大家一个问题：如何实现一个表格间隔显示背景颜色，如图：
最简单的方式莫过于使用结构化伪类，一句样式设置即可实现。even匹配偶数
结构化伪类有如下书写选项，至于什么意思，从字面意思即可理解： odd匹配奇数
p:nth-child(n){background:red} 表示E父元素中的第n个字节点 第一个子元素的下标是1
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*其中n是从0开始计算*/
经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。
E:nth-last-child(n) 从最后一个子元素开始计算 选择器和前面的“E:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
.div1 p:nth-child(2n){
background:red;
}
E:nth-of-type(n)
“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“E:nth-of-type(n)”选择器中的“n”和“E:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
刚才的那个例子就可以直接利用这个选择器实现，它可以只选中p元素。
p:nth-of-type(2n){
background-color: #64b0ff;
}
E:nth-last-of-type(n) 选择器和前面的“E:nth-of-type(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-of-type(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素
伪元素
伪元素本质上是创建了一个有内容的虚拟容器
伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；
伪类是给页面中已经存在的元素添加一个类。
有内容指得是他是可视的，通过伪元素可以向页面添加实质性的内容，虚拟容器是说，虽然你视觉上他存在，但是在html的dom结构中他不存在。
比如你在某个P标签中通过:after添加一个向右的箭头，页面中你看到他了，但是在文档中，这个箭头不存在，最简单的表现是，你永远不可能通过这个箭头去触发某个方法
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器
CSS中有如下四种伪元素选择器：
1）first-line:为某个元素的第一行文字使用样式；
2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；
3）before:在某个元素内容之前插入一些内容；（不管是before还是after都是写在元素里面的）
4）after: 在某个元素内容之后插入一些内容；
使用方法：选择器：伪元素{样式}
不过CSS3规定，伪元素选择器前面需要加两个冒号，以便于与伪类选择器区别。
所以代码中伪元素选择器推荐的写法如下： div::before
记住，伪元素是一个非常重要的概念！其中，:before和:after 非常常用。
首先，咱们先看看:before和:after是怎么回事儿。
上图中，我们可以看到，可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式，如下图：
另外，除了可以添加内容外，你还可以自定义执行内容的样式，如下图：
after清除浮动
元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框不能正常显示，父元素的兄弟元素位置布局错误等，
为了避免这种浮动带来的影响必须要清除浮动，:after就是其中的一种方法。
ul:after{
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
：checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<style>input:checked+span{ background: red; } </style> <body> <ul> <li><input type="checkbox" /><span>蓝色</span></li> <li><input type="checkbox"/><span>红色</span></li> <li><input type="radio"/><span>绿色</span></li> </ul> </body>
选中input，对span进行改动
E:default 伪类选择器
此选择器可以匹配被默认选中的表单元素，比如复选框、单选按钮或者select下拉菜单。
<style> input[type=radio]:default + label::after{ content:'(特价)'; color:red; } </style> </head> <body> <form name="myform" method="post" action="do.php"> <input type="radio" name="favorite" id="one" value="1" /> <label for="one">套餐一</label> <br> <input type="radio" name="favorite" id="two" value="2" checked /> <label for="two">套餐二</label> <br> <input type="radio" name="favorite" id="three" value="3" /> <label for="three">套餐三</label> </form> </body>
简单分析如下：
（1）.input[type=checkbox]:default匹配默认选中的复选框。
（2）.由于第二个复选框处于默认选中状态，所以它会被放大两倍。
（3）.一定要记住，是匹配默认选中的表单元素。
:first-line 伪元素向文本的首行添加特殊样式。
这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词。
:first-line 只能与块级元素关联。可以应用到首字母的属性是有限的。
<style> div{ width: 200px; } div:first-line{ background: green; } </style> </head> <body> <div> 学习学习学习克制克制克制 学习学习学习克制克制克制 学习学习学习克制克制克制 学习学习学习克制克制克制 </div>
. :before和:after 用来写小三角形
在日常的工作中会经常遇到小三角形这样的小图标，可以用添加图片的方式实现，但是更方便的是用:after :before伪类来实现。
HTML代码：
<div class="demo">这是一个测试</div>
.demo:after{
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent; transparent 是颜色设置透明 border-left: 8px solid #AFABAB;
position: relative;
top: 2px;
left: 10px;
}
创建三角形的原理是 border的表现是梯形的
这是border 20px的效果
而当内容区越来越小的时候，
降到0的时候 
这时候把不需要的border方向设置为transparent（透明） 想要的方向设置颜色 大小 就可以得到三角形了
也可以进行组合，比如把上左border 设置颜色，其他透明
比如把top设置60px 红色 bottom设置0px 透明，左右设置20px 透明 
4. 用:after和:before 写一个对话框
HTML代码：
<div class="left"> <p>吃了吗</p> </div> <div class="right"> <p>吃过了，吃了红烧排骨和酸菜鱼</p> </div>
CSS代码：
.left,.right{
min-height: 40px;
position: relative;
display: table;
text-align: center;
border-radius: 7px;
background-color: #9EEA6A;
}
.right{ /*使左右的对话框分开*/
top: 40px;
left: 60px;
}
.left > p,.right > p{ /*使内容居中*/
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
.left:before,.right:after{ /*用伪类写出小三角形*/
content: '';
display: block;
width: 0;
height: 0;
border: 8px solid transparent;
position: absolute;
top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{
border-right: 8px solid #9EEA6A;
left: -16px;
}
.right:after{
border-left: 8px solid #9EEA6A;
right: -16px;
}
效果如图所示
上面的对话框是模仿微信的样式写的，用:before和:after写很方便哦
今天的文章伪类_hover属于伪类还是伪元素分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/50314.html
