编辑这个页面须要登录或更高权限！

CSS > 子选择器

使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

完整CSS选择器参考手册

在线示例

选择所有父级是 <div> 元素的 <p> 元素：

<!DOCTYPE html>
<html>
<title>菜鸟教程(cainiaojc.com)</title>
<head>
<style>
div>p
{
background-color:red;
color:white;
}
div > span {background-color: DodgerBlue;}
</style>
</head>
<body>
<h1>欢迎来到菜鸟教程(www.cainiaojc.com)</h1>
<div>
<p>我们的网址是：www.cainiaojc.com.</p>
<p>我们的网站名称是：菜鸟教程.</p>
<span>演示子选择器</span>
</div>
<p>我们为您提供各种菜鸟教程学，学好基础，你才能走的更远！</p>
</body>
</html>
测试看看 ‹/›

定义和用法

元素1 > 元素2 {样式声明 }

element>element 子选择器用于选择特定父元素。

注意: 元素没有被选中是不能直接指定父级的子元素。

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 element>element 子选择器。

注意:element>element在IE8中运行，必须声明 <!DOCTYPE>

完整CSS选择器参考手册
CSS 函数(Functions)CSS 选择器大全

CSS 参考手册
CSS @规则(RULES)
CSS 属性大全