11、伪类选择器 - HTML5&CSS3.0基础部分-xyphf

于 2017-07-04 11:43:15 发布
阅读量300 收藏
点赞数
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyphf/article/details/74303944
版权

1.伪类选择器——nth-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li:nth-child(1){background:red;}
/*li:first-child {background:red;}*/
</style>
</head>
<body>
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
</body>
</html>

2.伪类选择器——奇数偶数选择器【应用隔行换色】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li:nth-child(2n){background:red;}/*偶数*/
/*li:nth-child(2n+1){background:green;} 奇数+1*/
li:nth-child(2n-1){background:green;}

/*
li:nth-child(even){background:red;} //偶数
li:nth-child(odd){background:green;}//奇数
*/
</style>
</head>
<body>
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>

</body>
</html>

3.伪类选择器——选取最后一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
/*li:nth-last-child(1){background:red;}*/
li:last-child{background:green;}
</style>
</head>
<body>
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
</body>
</html>

4.伪类选择器——获取顺数和倒数第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
li:nth-of-type(1){background:red;}
li:nth-last-of-type(1){background:red;}
</style>
</head>
<body>
<body>
<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
</body>
</html>
xyphf_和派孔明
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值