only-child选择器

来源:互联网 发布:python爬虫有什么用 编辑:程序博客网 时间:2024/06/06 06:50

: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;}

演示结果:

<ahref="http://www.dztcsd.com/">建筑资质代办</a>

<!DOCTYPE www.dztcsd.com/html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>
<ul>
  <li>Item1</li>
</ul>
<ol>
  <li>Item1</li>
</ol>
<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ol>
</body>
</html>

任务

在右边CSS编辑器的第6行中输入正确的代码,通过“:only-child”选择器,改变只有一个列表项的背景色为橙色。

0 0
原创粉丝点击