如何调用<li>标签CSS </li>

时间:2012-10-18 03:52:51

标签: html css wordpress

我有一个网站,其中html代码如下:

<div id="navmenu"><a id="home" href="http://www.abc.com" ><span>HOME<span></a>
<a id="about" href="http://www.abc.com/about-us/"><span>ABOUT US</span></a>
<ul class="about-child">
           <li><a href="#">Hard Drives1</a></li>
           <li><a href="#">Hard Drives<2/a></li>
 </ul>

我想调用这些ul和li标签来创建CSS,但我不知道如何使用CSS设置li和ul样式,因为我在Home和About中使用单独的CSS标签。

3 个答案:

答案 0 :(得分:2)

如果您需要选择所有<li>代码,请使用此代码:

li {... css rules ...}

如果您需要选择<li>中的所有<ul class="about-child">代码,请使用此代码:

ul.about-child li {... css rules ...}

如果您需要选择任何<li>标记内的所有<ul>标记,请使用此标记:

ul li {... css rules ...}

要包含样式表,您可以通过<link>添加

<link rel="stylesheet" href="style.css" />

或者将样式表嵌入文档中:

<style type="text/css">
    li {... css rules ...}
    ul.about-child li {... css rules ...}
    ul li {... css rules ...}
</style>

答案 1 :(得分:1)

定位ul:ul.about-child { ... } 定位li:ul.about-child li { ... }

如果这没有帮助,我无法在不了解您的问题的情况下提供更详细的信息。

答案 2 :(得分:1)

您可以通过添加文档的链接int head来加载外部css文件:

<html>
  <head>
    ....
    <link href="yourcssfile.css" type="text/css" rel="stylesheet" />

或者您可以使用样式标记:

<style type="text/css">
  ... your css here ...
</style>

这是您要编写此li标签样式的代码

ul.about-child li {
   ... your css rules here...
}

示例:

<style type="text/css">
ul.about-child li {
    list-style-type: disc;
    font-size:18px;
}
</style>