>表示第一个后天,空格表示所有后代。那么为什么写>的时候,不是只有第一行的香蕉和白菜有红框呢?
如果是最底层的元素,修改单个标签的话,个人认为直接在底层标签添加样式即可 <li style="border:1px solid red;">香蕉</li>如果有批量建议用class,不建议用id.
<style type="text/css"> .first>span{color:red;} .food li{ border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ } #xj{ border:1px solid green; } </style> </head> <body> <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <!--下面是本小节任务代码--> <ul class="food"> <li>水果 <ul> <li id="xj">香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul>
如果只是给香蕉加 的话 用ID选择器 只给 香蕉的<li>里面加一个ID 就可以了 相比类class更好点 个人见解
代码这样!
food的直接后代就是水果和蔬菜(food的儿子),水果的直接后代就是香蕉、苹果、梨(相当于food的孙辈),蔬菜同理
> 第一代后代 也就是儿子辈 空格 后代选择器是所有后代。
个人理解:水果和蔬菜是第一代,之后的一代才是香蕉呀什么的
思路:给香蕉加一个id 只给这个id加边框