CSS，HTML标签问题答案

【问题标题】：CSS, HTML tag issueCSS，HTML标签问题
【发布时间】：2012-09-29 22:32:24
【问题描述】：

我有一个问题

<ul class='nav'>            
        <li>
          <a class='' href='index.html'> Home </a>
        </li>

        <li>
            <li class="dropdown">
            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
              <li><a tabindex="-1" href="#">Action</a></li>
              <li><a tabindex="-1" href="#">Another action</a></li>
              <li><a tabindex="-1" href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a tabindex="-1" href="#">Separated link</a></li>
            </ul>
          </li>
        </li>
        </ul>

这个的CSS代码

 .topbar div>ul a,  .nav a
  {display:block;float:none;outline: 0;padding:8px 6px 6px;line-height:12px;text-    decoration:none;border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;}

我只想要这些带有 Home 和 DropDown 按钮的属性，我不想让这些属性用于我的选项卡按钮，即 Action、Another Actions 按钮。但是每当我尝试编辑它时，整个事情都会变得一团糟。

请帮我解决这个问题。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试这个代码：

    <li>
      <a class='dropdown-toggle' href='index.html'> Home </a>
    </li>

    <li>
        <li class="dropdown">
        <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
        <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
          <li><a tabindex="-1" href="#">Action</a></li>
          <li><a tabindex="-1" href="#">Another action</a></li>
          <li><a tabindex="-1" href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a tabindex="-1" href="#">Separated link</a></li>
        </ul>
      </li>
    </li>
    </ul>


.dropdown-toggle
{
    display:block;
    float:none;outline: 0;
    padding:8px 6px 6px;
    line-height:12px;
    text-decoration:none;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

【讨论】：

【解决方案2】：

您的 html 看起来有问题。将<li> 加倍。

但这里是针对 CSS 的：

a{
    outline: 0;
}
ul.nav a{
    display:block;
    padding:8px 6px 6px;
    line-height:12px;
    text-decoration:none;
    border-radius:5px;
}
ul.nav ul a{
    padding:8px 6px 6px;
}

【讨论】：

【解决方案3】：

将选择器更改为： .topbar div>ul li.dropdown > a, .nav a

【讨论】：