子选择符(E>F)

语法

  • E>F { sRules }

说明

选择所有作为E元素的子元素F。

  • 与包含选择符不同的是,子选择符只能命中子元素,而不能命中孙辈。

示例:

.demo > div {
    position: relative;
}
<div class="demo">
    <div class="a">
        <div class="b">子选择符</div>
    </div>
</div>

此例只有 .a 会被命中,因为它是 .demo 的子元素;

兼容性

IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
7.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test > li > a {
    color: #f00;
}
</style>
</head>
<body>
<ul class="test">
    <li>
        <a href="?">列表项目1</a>
        <ul>
            <li><a href="?">项目列表1.1</a></li>
            <li><a href="?">项目列表1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="?">列表项目2</a>
        <ul>
            <li><a href="?">项目列表2.1</a></li>
            <li><a href="?">项目列表2.2</a></li>
        </ul>
    </li>
    <li><a href="?">列表项目</a></li>
    <li><a href="?">列表项目</a></li>
</ul>
</body>
</html>