Question

我有一个像这样的div组成一个导航：

     <div id="dash">
           <ul>
              <li><a href="#">home</a></li>
              <li><a href="#">about</a></li>
           </ul>
     </div>

如何访问列表元素以向其添加样式？

Answer 1

引用div id然后是ul lis

#dash ul {list-style: none;}
#dash ul > li {display: inline-block;}

Answer 2

只需使用ID

即可

#dash ul{
/*for the ul */
}

#dash ul li{
/*for the li */
}

Answer 3

您可以使用>来访问孩子。

这是fiddle。

以下是摘录。

#dash > ul > li {
  background: red;
}

<div id="dash">
  <ul>
    <li><a href="#">home</a>
    </li>
    <li><a href="#">about</a>
    </li>
  </ul>
</div>

Answer 4

不那么难使用id破折号输入div并继续使用ul li作为列表项。

#dash ul li{
/* styles */ 
}

Answer 5

你可以进行内联样式，但它已经过时了：

只是一个想法

   <div id="dash">
  <ul>
    <li style="color:red; font-size:10px;"><a href="#">home</a>
    </li>
    <listyle="color:red; font-size:10px;"><a href="#">about</a>
    </li>
  </ul>
</div>

如何在div中设置列表元素的样式

5 个答案: