CSS3伪类选择器

最新推荐文章于 2023-04-20 16:27:30 发布

落花新月

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量955

点赞数 1

分类专栏： Web前端文章标签： CSS3 伪类选择器 first-child last-child nth-childn

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50393695

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.以前用的伪类选择器:

:hover

:link

:active

:visited

CSS3中新增的伪类选择器:

1) E:first-child 表示E的父元素的第一个子元素 E:(Elements)元素

2)E:last-child 表示E的父元素的最后一个子元素

3):root 表示文档的根

4）E:nth-child(n) 表示E的父元素的第n个子元素

5）E:nth-lastchild(n) 表示E的父元素的倒数第n个子元素

示例代码如下：

1）first-child

/*li的父元素（ul）的第一个子元素*/
li:first-child{
    color: #9abc4d;
    font-size: 18px;
    font-weight: bold;
}

<ul id="CN">
    <li>芈月传</li>
    <li>甄嬛传</li>
    <li>甜蜜蜜</li>
</ul>
<ul id="US">
    <li>老友记</li>
    <li>生活大爆炸</li>
    <li>国务卿夫人</li>
</ul>
<ul id="UK">
    <li>神探夏洛克</li>
    <li>唐顿庄园</li>
</ul>

运行效果：

2)last-child: （HTML代码与上面保持不变，CSS3样式如下所示：）

/*li的父元素（ul）的最后一个子元素*/
li:last-child{
    color: #bc1011;
    font-size: 18px;
    font-weight: bold;
}

运行结果如下：

3）第n个子元素：（当n为2的时候）

/*第2个子元素*/
li:nth-child(2){
    color: #635abc;
    font-size: 18px;
    font-weight: bold;
}

运行效果如下：

4）倒数第n个元素（n=3为例）

/*倒数第n个元素*/
li:nth-last-child(3){
    color: #ffc02f;
    font-size: 18px;
    font-weight: bold;
}

运行效果：

5）E:empty 不包含任何内容的元素

E:enabled 表示匹配可以用的元素

E:disabled 匹配不可用的元素

E:checked 匹配选中的元素（:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。）

注意：只有 Opera 支持 :checked 选择器。

综合示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他不太常用的</title>
    <style>
        :enabled{
            border: #f552ff solid 3px;
        }
        :disabled{
            color: #7fff54;
            font-size: 16px;
        }
        :checked{
            background-color: #9361ff;
            /*border: #ff662e solid 3px;*/
        }
    </style>
</head>
<body>
<!--代码对其：Ctrl+Alt+L -->
<input type="text" name="username"><br>
<input type="text" disabled value="不可用"><br>
<input type="radio" checked="checked" name="gender">单选按钮
</body>
</html>