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


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浏览器的运行结果)




  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值