常用伪类伪元素选择器

Posted 2022-04-16 caixingmin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常用伪类伪元素选择器相关的知识，希望对你有一定的参考价值。

伪类选择器

: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

以上是关于常用伪类伪元素选择器的主要内容，如果未能解决你的问题，请参考以下文章

css3 伪类

伪类（伪类选择器）

CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记

css伪类选择器都有哪些

表单自定义样式