您的位置：首页 > Web前端 > CSS

CSS3伪类选择器

2015-12-24 13:52 686 查看

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>

运行结果：（Chrome浏览器的运行结果）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3 伪类选择器 first-child last-child nth-childn

相关文章推荐

新的分享

章节导航