CSS3伪类选择器

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>
运行效果:

CSS3伪类选择器_第1张图片

2)last-child: (HTML代码与上面保持不变,CSS3样式如下所示:)

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

运行结果如下:

CSS3伪类选择器_第2张图片

3)第n个子元素:(当n为2的时候)

/*2个子元素*/
li:nth-child(2){
    color: #635abc;
    font-size: 18px;
    font-weight: bold;
}
运行效果如下:

CSS3伪类选择器_第3张图片

4)倒数第n个元素(n=3为例)

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

CSS3伪类选择器_第4张图片

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)