Вопрос:

css как сделать жирный шрифт только для первого набора <ul>

css css3

7824 просмотра

4 ответа

156 Репутация автора

У меня есть 2 или более <UL>наборов внутри, и я хочу сделать только первый <a>набор UL, выделенный жирным шрифтом. на самом деле это меню с несколькими подменю, и я хочу, чтобы родительские ссылки были выделены жирным шрифтом.

Я знаю, что это можно сделать, добавив еще несколько идентификаторов или классов, но это не вариант, и я хочу попробовать только метод 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».

Автор: HabibS Источник Размещён: 13.11.2012 06:29

Ответы (4)


5 плюса

17913 Репутация автора

Решение

Используйте первый дочерний селектор: >

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

Не то чтобы если вам нужна поддержка IE6, вам придется делать это вручную, так как IE6 не поддерживает >селектор:

.menu li a {
    font-weight: bold;
}
.menu li ul li a {
    font-weight: normal;
}
Автор: Michael Shimmins Размещён: 13.11.2012 06:32

1 плюс

8112 Репутация автора

Это вероятно сделает это ...

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

ul.menu li ul li a
{
    font-weight:normal;
}
Автор: Alexandre Lavoie Размещён: 13.11.2012 06:33

0 плюса

770 Репутация автора

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

Автор: Gopikrishna Размещён: 13.11.2012 06:33

1 плюс

223967 Репутация автора

Вам нужно будет использовать дочерний селектор и сделать верхний уровень <ul>уникальным, назначив ему некоторый класс:

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

Демо: http://jsfiddle.net/kJJw9/

Автор: Blender Размещён: 13.11.2012 06:35
Вопросы из категории :
32x32