【CSS3】---only-child选择器+only-of-type选择器
2015-06-04 14:22
811 查看
only-child选择器
“
示例演示
通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。
HTML代码:
CSS代码:
演示结果:
示例演示
通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
HTML代码:
CSS代码:
演示结果:
“
:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
示例演示
通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。
HTML代码:
<div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>
CSS代码:
.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }
演示结果:
only-of-type选择器
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。
“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
示例演示
通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
HTML代码:
<div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div>
CSS代码:
.wrapper > div:only-of-type { background: orange; }
演示结果:
相关文章推荐
- 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器
- 【CSS3】---first-of-type选择器+nth-of-type(n)选择器
- 【CSS3】---结构性伪类选择器-first-child+last-child
- 【CSS3】---结构性伪类选择器-root+not+empty+target
- 【CSS3】---属性选择器
- 【CSS3】---练习制作导航菜单
- 【CSS3】---background-origin background-clip background-size
- 【CSS3】---文本阴影text-shadow
- 【CSS3】---嵌入字体@font-face
- 【CSS3】---text-overflow 与 word-wrap
- 【CSS3】---颜色RGBA及渐变色
- 【CSS3】---为边框应用图片 border-image
- 【CSS3】---阴影 box-shadow
- 【CSS3】---学习目录
- 【CSS3】---认识CSS3
- 【CSS3】---圆角效果 border-radius
- CSS强制英文/中文换行与不换行
- 【WebKit】---WebKit的CSS扩展(WebKit是私有属性)
- css一些小tip
- css background