WEB前端 -- CSS伪类、伪元素选择器

一、伪类选择器

伪类通过冒号(:)进行定义,它定义了元素的状态,如点击按下、点击完等。以前都是直接操作元素的样式,现在可为元素的状态改样式,看上去更“动态”。

伪类一般反映无法在CSS中轻松或可靠检测到的某个元素的状态或属性。

伪类更多地是定义元素的状态。

伪类选择器:

1)E:link

2)E:visited

3)E:hover

4)E:active

5)E:not(S) 匹配不包含S的E元素

6)E:first-child

7)E:last-child

8)E:only-child

9)E:empty

10)E:checked

11)E:nth-child(n)

二、伪元素选择器

伪对象即伪元素,表示DOM外部的某种文档结构。

伪元素改变文档结构,在结构外另加一个没有实际存在的元素(即伪元素)。

常用伪元素:

1)E:before/E::before

2)E:after/E::after

伪元素添加图片时与普通元素一样要指定为块元素、宽和高。

如p::after{content:"";background:url();display:inline-block;width:20px;height:50px;}

例:为选中的选项设置背景颜色及选中项后面加“我被选中了”

<fieldset>
	<legend>颜色最喜欢的颜色</legend>
    <ul>
    	<li><label><input type="radio" name="color-group" value="0"/><span>蓝色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>绿色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
<fieldset>
	<legend>颜色喜欢的颜色</legend>
    <ul>
    	<li><label><input type="checkbox" name="color-group" value="0"/><span>蓝色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>绿色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
<style>
 input:checked+span{ background:#F00;}
 input:checked+span::after{ content:"   我被选中了"}

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq814965130/article/details/78643833
文章标签: WEB前端 伪类 CSS
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

WEB前端 -- CSS伪类、伪元素选择器

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭