Question

我想在不更改li{}的CSS样式的情况下覆盖#box中的列表项。我想我只能通过创建新的CSS类并使用<span>标签来改变它。但对我来说，只有当我在<li>标记内应用这个新类时才有可能，因此它只适用于一个<li>。我一直在为每个列表项执行此操作，这不是正确的方法。

我想在#box id中格式化li标签，并保留其他li标签。

<html>
<head>
<style>
ol {
    font-family: arial;
    //background: #000; /*font-size:12px; */
                font-size: 11px;
    color: #066;
 }

a:link, a:visited,a:active {color: #660066;}

table {
    border: none;
    color: #000;
 }

{}

.stylish {
    font-size: 18px;
    font-weight: bold;
 }
.sidecorner {font-size: 14px;}

.olcolor {
    color: #039FF0;
}

.myclass, ol.myclass{
    color:#3F6 !Important;

    }

li {
    font-weight: normal;
    font-size: 11pt;
    font-family: arial;
    color: #666;
 }

#box {
    background-color: #ffcc66;
    margin:20px;
    height: auto;
    width: auto;
    padding:10px;
    border:1px dotted;
}

.sidebar {
    position: absolute;
    top: 19px;
    bottom: 0px;
    left: 813px;
    width: 276px;
    min-height: 250px;
    //background: lightgrey;
    padding-bottom: 0px;
    margin-bottom: 0px;
    height: 417px;
}


#li {
    color: #666;
}
</style>


</head>


<body>
<div class="container">
  <div class="body">
    <div class="sidebar">
      <table width="276" border="0" cellpadding="1" cellspacing="1"  >
        <tr>
          <td height="59" valign="middle" style="background:#660066; color: #FFF; font-size: 16px; font-weight: bold; font-family: arial; text-align: center;">sdfsdfsdf</td>
        </tr>
        <tr>
          <td valign="middle" style="background:#F2F2F2; color: #666; "><ol style="padding-top:25px;padding-right:5px;padding-bottom:20px">
            <li> Tasdfsdf</li>
            <li>asdf</li>
            <li>sadf</li>
            <li>asdf</li>
            <li>as</li>
            <li>dfsd</li>
            <li>sdf</li>
          </ol>
            <p>&nbsp;</p></td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
<h2>&nbsp;</h2>
    <div id="box">
  <h3>Sample Title</h3><hr style="color:#960">
  <h2>Heading...</h2>

  <ol class="myclass">
       <li>This is the sample text<br>

      </li>

     </span>
  </ol>
    </div>
  </div>
</div>
</body>


</html>

Answer 1

如果我理解正确，您可以将样式应用于给定ID下面的嵌套元素，如下所示：

#box li {
color: blue;
}

这将使其他li标签不受影响，但如果我理解错误 - 请在评论中纠正我。

Answer 2

我通过写一个复合ID来覆盖#box ID里面的li标签：

    #box li{
           color:#999999;

}

现在#box ID之外的其他li标签不受影响，我刚刚应用了li {}样式。

无法使用div或id覆盖li

2 个答案: