Question

假设我有一个清单：

<ul>
   <li>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

我需要改变动物和鸟类的背景，使它看起来像坚固的一块。我试着像这样把它放到div中：

<ul>
   <div id='foo'>
   <li>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   </div>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

但它没有用。我想把它放在实心矩形中。任何反馈表示赞赏！

Answer 1

试试这个

<ul>
   <li class="animal>
     Animals
     <ul">
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li class="animal>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

CSS：设置它们的宽度，因此它们将具有相同的宽度

.animal 
{
   width:200px;
   background-color:green;

}

Answer 2

使用CCS类样式并将其应用于<li>元素。在列表中放置其他类型的元素是无效的HTML。

CSS：

.mystyle {
    /* Whatever */
}

标记：

<li class="mystyle"></li>

Answer 3

您无法在UL中使用div元素，但您可以通过两种方式执行此操作：

1）手动为鸟类和动物设置一个css类：

<ul>
   <li class='someBackground'>
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li class='someBackground'>
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

2）使用CSS3选择器：

ul li:nth-child(1),ul li:nth-child(2) {
    //your css code
}

Answer 4

<ul>
   <li id="animals">
     Animals
     <ul>
       <li>tiger</li>
       <li>lion</li>
       <li>cow</li>
     </ul>
   </li>
   <li id="birds">
     Birds
     <ul>
       <li>owl</li>
       <li>parrot</li>
     </ul>
   </li>
   <li>
     Flowers
     <ul>
       <li>rose</li>
       <li>lily</li>
    </ul>
   </li>
</ul>

CSS：

#animals, #birds {
background:green;
}

Answer 5

我将列出的鸟类和动物列表更改为一个li，我应用了样式。

感谢大家指点我！：）

div中列表的一部分

5 个答案: