CSS E:only-child伪类选择符

E: only-child的定义和用法:
匹配父元素仅有的一个子元素E。
特别注意的是E元素某个元素的子元素。
语法结构:

E:only-child{ Rules }

浏览器支持:
IE浏览器支持此选择器。
谷歌浏览器支持此选择器。
火狐浏览器支持此选择器。
说明:IE6-IE8浏览器不支持此属性。
实例代码:
实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
li:only-child{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>Div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
</ul>
</body>
</html>

代码不能够正确运行,因为li元素并不是ul元素的唯一子元素。
实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
li:only-child{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li>html专区</li>
</ul>
</body>
</html>

代码就满足了要求。


你可能感兴趣的:(CSS E:only-child伪类选择符)