HTML&CSS基础-子元素的伪类选择器
2024-10-19 18:19:53
HTML&CSS基础-子元素的伪类选择器
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.html的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素的伪类选择器</title>
<style>
/**
*
* 子元素的伪类装饰器:
* :first-child
* 可以选中第一个子元素
* :last-child
* 可以选中最后一个子元素
* :nth-child(num)
* 可以选中任意位置的子元素;
* 如果不写num的值则默认为1，效果和":first-child"伪类相同了;
* 如果num的值为"even"，则表示偶数位置子元素
* 如果num的值为"odd",则表示奇数位置子元素
*
* 可选择类型:
* :first-of-type
* :last-of-type
* :nth-of-type
* 以上元素和":first-child",":last-child",":nth-child(num)"这些非常类似;
* 只不过first-child",":last-child",":nth-child(num)"是在所有的子元素中排列。
* 而":first-of-type",":last-of-type",":nth-of-type"是在当前类型的子元素中排列
*
*/ /**
* 案例一:
* 为第一个p标签(该标签必须是第一个标签)设置一个背景颜色为黄色
*/
p:first-child{
background-color: yellow;
} /**
* 案例二:
* 为最后一个p标签(该标签必须是最后一个标签)设置背景颜色为棕色
*/
p:last-child{
background-color: brown;
} /**
* 案例三:
* 选择第三个位置的子元素将其背景设置为洋红色
*/
p:nth-child(3){
background-color: magenta;
} /**
* 案例四:
* 选择所有子元素的第一个p标签并将其背景颜色设置为红色
*/
p:first-of-type{
background-color: red;
} /**
* 案例五:
* 选择所有子元素的最后一个p标签并将其背景颜色设置为蓝色
*/
p:last-of-type{
background-color: blue;
}
</style>
</head>
<body> <p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<p>我是第一个div的一个p标签</p>
<span>我是第一个div的span标签</span>
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<span>我是第二个div的span标签</span>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
<p>我是第二个div的一个p标签</p>
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是body的span标签</span> </body>
</html>
二.浏览器打开以上代码渲染结果
最新文章
- javacomm64位用不了，可以使用RXTXcomm for x64
- vb6 关闭显示器
- 域名在微信朋友圈内分享需要ICP备案 杜绝不良信息传播
- Android中获取蓝牙log
- 分享25个CSS前端网页设计常用技巧
- 线性表 及Java实现 顺序表、链表、栈、队列
- 在 ServiceModel 客户端配置部分中，找不到引用协定“PmWs.PmWebServiceSoap”的默认终结点元素
- 转：So Easy！让开发人员更轻松的工具和资源
- 移动前端不得不了解的HTML5 head 头标签（中下篇）
- JavaScript奇技淫巧
- 05解决flask循环引用的问题
- 一起学爬虫——使用xpath库爬取猫眼电影国内票房榜
- token登录流程
- 深入浅出经典面试题：从浏览器中输入URL到页面加载发生了什么 - Part 3
- 计算机基础-CPU
- django 2中的app_name和namespace
- 洛谷P2852 牛奶模式Milk Patterns [USACO06DEC] 字符串
- windows 7 系统下，用户每次登录都是以临时配置文件的形式存在于users文件夹下
- es 修改拼音分词器源码实现汉字/拼音/简拼混合搜索时同音字不匹配
- P3512 [POI2010]PIL-Pilots