CSS核心(四十八)CSS3新增的一些列伪类选择器

[复制链接]
查看: 1329|回复: 31
发表于 2023-2-1 18:52:09 | 显示全部楼层 | 阅读模式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3新增的一些列伪类选择器</title>
</head>
<style>
        /* 选择的是根标签----html标签 */
        :root{
                background:#0f0;        
        }
        ul li{
                width:200px;
                height:30px;
                margin-bottom:10px;
                background:#f00;
        }
        /* 选择第一个li */
        li:first-child{
                background:#00f;        
        }
        /* 选择最后一个li */
        li:last-child{
                background:#ff0;        
        }
        /* 选择第6个li */
        li:nth-child(6){
                background:#F0F;                
        }
        /* 选择奇数的li元素 */
        li:nth-child(even){
                background:#666;        
        }
        /* 选择偶数的li元素 */
        li:nth-child(odd){
                background:#fff;        
        }
        /* 选择奇数的li元素 */
        li::nth-child(2n+1){
        /* 选择偶数的li元素 */        
        }
        li:nth-child(2n){
                
                background:#F0F;
        }
        /* 选择空li元素 */
        li:empty{
                background:#f00;        
        }
        
        /* 选择仅有一个子元素的p元素 */
        p:only-child{
                background:#ff0;        
        }
        
        /* 另外还有
        first-of-type
        nth-of-type
        last-of-type 
        这里就不讲解了,如果想继续深入,大家可以网上查询它们的语法含义 */

</style>
<body>
<p>泉眼无声惜细流,树阴照水爱晴柔</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li></li>
            <li>8</li>
            <li>9</li>

    </ul>
    <div>
    <p>常恐秋节至,焜黄华叶衰</p>        
    </div>

<p>阳春布德泽,万物生光辉</p>
</body>
</html>



显示结果如下:

CSS核心(四十八)CSS3新增的一些列伪类选择器

大家可以把以上代码复制下来慢慢分析。
易博软件介绍

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-2-19 02:30:16 | 显示全部楼层
^真是厉害啊  谢谢你的点悟
发表于 2023-2-25 12:32:30 | 显示全部楼层
应该好好学习的啊

0

主题

19

帖子

10

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
10
发表于 2023-3-1 15:58:40 | 显示全部楼层
看到你经历,很受用。

0

主题

12

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-7 21:47:21 | 显示全部楼层
写的很不错!

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-13 21:44:28 | 显示全部楼层
^看了你文章之后,顿感自己太无知了,一点都不懂……要努力学编程了……谢谢……    没白看,我也刚开始学习编程,很有启发,也知道了一些经验,谢谢

5

主题

215

帖子

115

积分

营销菜鸟

Rank: 3Rank: 3

积分
115
发表于 2023-3-18 22:35:09 | 显示全部楼层
人家的经验教训  就是我们的宝贵财富  志当存高远  给自己提高要求  就当是为了自己

0

主题

21

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-24 02:23:05 | 显示全部楼层
收益匪浅  感触颇深  十分感谢你发的文章~~

0

主题

13

帖子

7

积分

营销入门

Rank: 2

积分
7
发表于 2023-3-28 14:06:16 | 显示全部楼层
编程 a我不懂  但是我正要学编程呢希望我能学的不一定有你好 但也要和你一样可可 够qiang
发表于 2023-3-31 11:48:58 | 显示全部楼层
well
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表