不用后代选择器，用嵌入式css式样效果一样。有什么区别？

源自：8-7 这么快就当爷爷了? - 后代选择器

不用后代选择器，用嵌入式css式样效果一样。有什么区别？

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>后代选择器</title>

<style type="text/css">

.first span{color:red;}

li{

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

}

</style>

</head>

<body>

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<ul>

<li>水果

<ul>

<li>香蕉</li>

<li>苹果</li>

<li>梨</li>

</ul>

</li>

<li>蔬菜

<ul>

<li>白菜</li>

<li>油菜</li>

<li>卷心菜</li>

</ul>

</li>

</ul>

</body>

</html>

提问者：池1 2016-10-31 17:16

个回答

sherryliu

2016-12-24 00:02:31

<ul class="food">
    <li>水果
        <ul>
           <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
       <ul>
           <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

我认为不同点在于<ul class="food">,这样使用后代选择器只会设置这个列表里的所有<li>，如果使用嵌入式又没有其他定义的话，像楼主这样，整个html所有的<li>都被设置了样式。

1
池1

2016-11-01 10:50:00

ul-li内部还有个其他选择器才会有优先级的问题

0
opaceX

2016-10-31 17:20:52

执行的优先级不同吧

0