如何把蔬菜水果用一个大框圈起来,水果蔬菜前面还出现无序排列符号(小圆点)
直接在style里定义food的格式就好了,去掉后面的>li, 就把蔬菜水果全部圈到一起了,代码如下
.food{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
<style type="text/css"> .food{ border:1px solid blue; } </style> <ul class="food"> <li>水果 <ul> <li>苹果</li> <li>梨</li> <li>香蕉</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>白菜</li> <li>白菜</li> </ul> </li> </ul>
<style type="text/css">
.food>li{
border: 2px solid red;
}
</style>
<style type="text/css">
.first span{ color:red;}
.food>li{border:1px solid red;}/* 添加边框样式(粗细为1px,颜色为红色的实线)*/
</style>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
<style type="text/css">
.first span{color:red;}
.food{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
</style>