1回答

樱桃小胖子

2017-02-03

已采纳

1、子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。代码示例：

css代码

.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/  

 html代码：

<h1>食物</h1>  

<ul class="food">  

    <li>水果  

        <ul>  

            <li>香蕉</li>  

            <li>苹果</li>  

            <li>梨</li>  

        </ul>  

    </li>  

    <li>蔬菜  

        <ul>  

            <li>白菜</li>  

            <li>油菜</li>  

            <li>卷心菜</li>  

        </ul>  

    </li>  

</ul>  

运行效果图：

2、包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。代码示例：

css代码

.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/

}

html代码：

<ul class="food">  

    <li>水果  

        <ul>  

            <li>香蕉</li>  

            <li>苹果</li>  

            <li>梨</li>  

        </ul>  

    </li>  

    <li>蔬菜  

        <ul>  

            <li>白菜</li>  

            <li>油菜</li>  

            <li>卷心菜</li>  

        </ul>  

    </li>  

</ul>  

运行效果图

望采纳~

2

hotDeath

h 非常感谢！

h017-02-03

共1条回复