Question

我内部有2个或更多<UL>个设置，并且只想将第一个UL <a>设置为粗体。实际上，这是一个包含多个子菜单的菜单，我只想将父链接加粗。

我知道可以通过添加更多ID或类来完成，但这不是一个选项，只想尝试css方法。

<ul class="menu">
    <li class="collapsed first">
        <a title="Mechanical products" href="1">Mechanical Products</a>
    </li>
  <li class="collapsed">
    <a title="Chemicals" href="2">Chemicals</a>
  </li>
  <li class="expanded active-trail">
    <a title="Instrumentation" href="3">Instrumentation</a>
    <ul class="menu">
        <li class="leaf first">
            <a title="Control valves FISHER" href="4">Control Valves</a>
        </li>
      <li class="expanded active-trail">
        <a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
        <ul class="menu">
            <li class="leaf first">
                <a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
            </li>
          <li class="leaf last">
            <a title="Coupon Holders, Coupons &amp; Probes" href="7">Holders,Coupons</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
    <li class="collapsed">
        <a title="Mechanical products2" href="8">Mechanical Products2</a>
    </li>
</ul>

在本例中，只有“机械产品”，“化学品”，“仪器仪表”和“机械产品2”应该大胆。

Answer 1

使用第一个子选择器：>

.menu > li {
    font-weight: bold;
}

不是说如果你需要支持IE6，你必须手动完成，因为IE6不支持>选择器：

.menu li a {
    font-weight: bold;
}
.menu li ul li a {
    font-weight: normal;
}

Answer 2

它可能会这样做......

ul.menu li a
{
    font-weight:bold;
}

ul.menu li ul li a
{
    font-weight:normal;
}

Answer 3

你必须使用子选择器并通过给它一些类来使顶级<ul>唯一：

ul.top-level > li > a {
   font-weight: bold;
}

演示：http://jsfiddle.net/kJJw9/

Answer 4

ul.menu li.collapsed {font-weight：bold;}

css如何只为第一个<ul>设置>制作粗体字体

4 个答案: