前端技术学习之选择器（九）
来源：互联网 发布：网络层协议 编辑：程序博客网 时间：2024/06/05 14:19
十，:only-child
:only-child，一看就是选择一个元素，且该元素是其父元素唯一的子元素。
代码例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
</style>
</head>
<body>
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
</body>
</html>
运行效果：
十一，:only-of-type
:only-of-type选择器是对:only-child的扩展，选择某种类型的子元素，且该子元素是其父元素中唯一一个该类型 的选择器。
代码例子：修改容器中仅有一个div元素的背景色为橙色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.wrapper > div:only-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
</body>
</html>
运行效果：
- 前端技术学习之选择器（九）
- 前端技术学习之选择器（一）
- 前端技术学习之选择器（二）
- 前端技术学习之选择器（三）
- 前端技术学习之选择器（四）
- 前端技术学习之选择器（五）
- 前端技术学习之选择器（六）
- 前端技术学习之选择器（七）
- 前端技术学习之选择器（八）
- 前端技术学习之选择器（十）
- 前端技术学习之选择器（十一）
- 前端技术学习之选择器（十二）
- 前端技术学习之选择器（十三）
- 前端基础学习之CSS选择器
- COM 技术内幕学习之九 （简化程序编写）
- 前端学习之路-css选择器和布局
- 前端学习_01.css选择器
- web前端之css选择器
- 偶有所感
- 项目中遇到BUG汇总
- WPF中绘画和动画 (一)
- Qt4.8.5移植到AM335的并实现竖屏显示记录
- php异常\错误处理类
- 前端技术学习之选择器（九）
- 微信服务号开发----创建个性化菜单
- 数据结构一绪论（上）之计算
- 编程算法练习
- CodeForces 567D One-Dimensional Battle Ships【二分】
- JavaScript谁动了你的代码
- zoj1101
- 文件传输到服务器 servlet
- VPP LoadBalancer 试用
