1-2:CSS3课程入门之结构选择
2024-09-04 11:01:27
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算 【先理解nth-of-type(n)】
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点 ,例如<p></p>不能存在空格
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素的父元素只有一个子节点。注意:子节点不包含文本节点,【<div><b></b></div> b:only-child】
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点【
<p><span>123</span><a href="">456</a></p>
p *:only-of-type
/*父级下某类型的标签仅有一个时该唯一元素会被选中*/
】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>last-of-type与last-child区别</title>
<style>
*{margin:0; padding:0;}
body *:last-of-type{
height:30px;
line-height:30px;
border:1px solid red;
background:yellow;
margin-bottom:5px;
} </style>
</head>
<body>
<p>001</p>
<h5>111</h5>
<p>002</p>
<p>003</p>
<h5>222</h5>
<p>004</p>
<p>005</p>
</body>
</html>
最新文章
- EKF的理解
- 条形码的应用三-----------从Excel文件中读取条形码
- SQL 语句中union all和order by同时使用
- yii2使用多个数据库的案例
- Chrome编辑了样式或者JS之后自动同步回本地工程
- 设计模式学习起点 UML类图笔记
- EasyUI DataGrid 复选框
- Lambda表达式与Function接口
- 佳佳的魔法药水 (vijos 1285)
- ios开发之OC基础-oc小程序
- Jrebel 6.2.1破解
- 用Stack实现对多线程的管理范例
- jquery animate stop函数解析
- HDU-1864-最大报销额
- hdu 3966 Aragorn&#39;s Story(树链剖分+树状数组/线段树)
- 并发容器学习—ConcurrentSkipListMap与ConcurrentSkipListSet 原
- springMVC整理04--文件上传 &; 拦截器 &; 异常处理
- 请求转发(forward)和请求重定向(redirect)的区别(转)
- Go 环境变量相关操作
- s5-1 CPU调度
热门文章
- 用来武装Firebug的十四款Firefox插件
- MVP MVVM MVC
- linux mmap 详解【转】
- LeetCode OJ-- Jump Game
- Block为什么使用Copy?
- 16Aspx.com-PHP企业整站源码 景观石材大理石类织梦模板 含手机移动端 完整源码 APP+PC
- autofac 用法总结
- Needle in a haystack: efficient storage of billions of photos 【转】
- luogu P1345 [USACO5.4]奶牛的电信Telecowmunication
- GCJ——Crazy Rows (2009 Round 2 A)