博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端技术学习之选择器(六)
阅读量:6868 次
发布时间:2019-06-26

本文共 525 字,大约阅读时间需要 1 分钟。

hot3.png

七,结构性伪类选择器:

    :选择器用来匹配某个父元素的一个或多个特定的子元素。

代码例子:

<!DOCTYPE html>

<html>

<head>

<style>

/*p:nth-child(2n+0)

{

background:#ff0000;

}

p:nth-child(odd)

{

background:#ff0000;

}*/

p:nth-child(even)

{

background:#0000ff;

}

</style>

</head>

<body>

 

<h1>这是标题</h1>

<p>第一个段落。</p>

<p>第二个段落。</p>

<p>第三个段落。</p>

<p>第四个段落。</p>

 

 

</body>

</html>

 

运行效果:

备注:Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

:和:nth-child(n)相似,但是多了个last,这个last代表从后向前,其他地方没差别。

转载于:https://my.oschina.net/u/2971691/blog/821603

你可能感兴趣的文章
《Spark大数据分析实战》——第1章Spark简介
查看>>
5.5确认范围
查看>>
Chris Grainger:我们如何才能更好地编程?
查看>>
以黑客教主之名,TK 发现 Windows 史上最大漏洞
查看>>
《IPv6精髓(第2版)》——导读
查看>>
《Windows Server 2012 Hyper-V虚拟化管理实践》一1.2 Hyper-V安装前后的变化
查看>>
Proxmox VE 4.4 发布,新 Ceph 仪表盘上线
查看>>
《CCNP TSHOOT(642-832)学习指南》一1.2 维护进程及维护流程
查看>>
华为宣布开源流处理平台查询语言 StreamCQL
查看>>
2016 年 6 月 RedMonk 编程语言排行榜
查看>>
《Adobe Photoshop CC经典教程(彩色版)》—第1课1.4节在Photoshop中还原操作
查看>>
HttpClient使用详解
查看>>
增强现实?先不要指望那些眼镜了
查看>>
《iOS 6核心开发手册(第4版)》——1.10节秘诀:使用多触摸交互
查看>>
《云数据管理:挑战与机遇》一第1章
查看>>
《嵌入式C编程实战》——1.5 软件开发工具
查看>>
分析3000份技术面试数据:这几大指标比你毕业于哪所学校更要紧
查看>>
Linux有问必答:如何检查PDF中使用了哪种字体
查看>>
《Lua游戏AI开发指南》一2.1 新建一个沙箱项目
查看>>
如何使用 Weave 以及 Docker 搭建 Nginx 反向代理/负载均衡服务器
查看>>