html - div中列表的一部分

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

我改变了我放在一里下的鸟类和动物列表，我应用了样式。

谢谢大家指点我那里！:)

Answer 4

您不能div在 UL 中使用元素，但可以通过 2 种方式来实现：

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 5

<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;
}