伪类选择器
:link 未访问
:visited 已访问
:hover 鼠标悬停
:active 鼠标按下
:not(s) 匹配不含s选择器的元素
:frist-child 父元素的第一个元素
:last-child 父元素的最后一个元素
:only-child 父元素的唯一一个元素
:checked 选中 :checked+伪元素
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>:checked+伪元素</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
<style>
input:checked + span {
background: #f00;
}
input:checked + span:after {
content: " 我被选中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
:checked+伪元素
伪元素选择器(content属性)
::before
::after
原文地址：https://www.cnblogs.com/Caixingmin/p/11191993.html
时间： 2024-10-12 16:55:12