还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

            <li>苹果</li>

            <li>梨</li>

        </ul>

    </li>

    <li>蔬菜

    <ul>

        <li>白菜</li>

            <li>油菜</li>

            <li>卷心菜</li>

        </ul>

    </li>

</ul>

.food下面的第一代子元素为<ul>,<li>第二代子元素