Стилизация диапазона внутри тега привязки

Question

Я пытаюсь сделать это красиво, но я столкнулся с проблемой.У меня есть элемент span, содержащий подзаголовок или краткое описание внутри тега привязки.К сожалению, он стилизован так же, как и якорь, что не совсем так, как я хочу.Я попытался применить стилирование к самому промежутку, но они, кажется, переопределяются стилями привязки.Проблема в том, что я не хочу, чтобы это подчеркивалось при наведении ссылки.

Вот мой html.

        <ul>
           <li><a href="#">A <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">B <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">C <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">D <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">E <span class="subTitle">Subtitle</span></a></li>
        </ul>

И мой CSS

#leftNav ul li { position: relative; }
#leftNav ul li a span.subTitle
{
   bottom:          4px;
   color:           #000000;
   display:         block;
   font-size:       12px;
   left:            10px;
   position:        absolute;
   text-decoration: none;
}

Я попытался стилизовать сам диапазон, который, кажется, не имеет никакого эффекта.Размещение промежутка вне якоря относительно li также не работает.span блокирует событие наведения якоря, и он не кликабелен.

Answer 1

Тест вашего примера кода (добавление подходящего элемента div с идентификатором вокруг него), кажется, работает нормально:

http://jsfiddle.net/44ndf/1/

Его стиль по умолчанию, конечно, будет таким же, как и якорь, поэтому вам, возможно, придется переопределить все обратно на нормальное. Вам нужно будет предоставить работающий (или, точнее, неработающий) образец, чтобы мы могли точно определить суть вашей проблемы.

В заключение, хотя вещи для проверки включают в себя:

1) То, что ваши селекторы определенно указывают на правильные элементы (например, в вышеупомянутом я должен был включить div с id "leftNav", чтобы селектор поднял его

2) То, что у вас определенно нет конфликтующих стилей - возможно, что-то с более высоким приоритетом или, возможно, что-то с! Важный, переопределяющим.

3) Используйте Firebug, чтобы точно определить, какие стили применяются из каких селекторов CSS, чтобы определить, в чем заключаются ваши проблемы.

Edit:

В случае подчеркивания кажется, что невозможно (или, по крайней мере, так, как я нашел) переопределить стиль. Поэтому вместо этого я немного изменил разметку:

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a>

С помощью этой разметки вы можете установить стили следующим образом:

#leftNav ul li a span.subTitle
{
    text-decoration: none;
}

#leftNav ul li a span
{
 text-decoration: underline;   
}

#leftNav ul li a
{
 text-decoration: none;  
}

Это в основном говорит якору не иметь подчеркивания. Все промежутки должны иметь подчеркивания, а затем ваш диапазон субтитров не иметь подчеркивания. Очевидно, вам нужно убедиться, что каждый знак, который хочет подчеркнуть, находится в промежутке (все, что не в промежутке, не будет подчеркнуто).

Для меня это выглядит как ошибка браузера, так как IE, кажется, ведет себя хорошо - http://jsfiddle.net/44ndf/5/ не подчеркивает субтитры в IE, но делает это в Firefox. Я подозреваю, что есть некоторые специальные замечания, которые подчеркивают, что якоря не отменяются.

Answer 2

Не уверен, в чем проблема, потому что я не вижу, какой тег привязки имеет стиль, но вы всегда можете попробовать !important после правила css.Как то так:

#leftNav ul li a span.subTitle
{
   bottom:          4px;
   display:         block;
   font-size:       12px !important;
   left:            10px;
   position:        absolute;
}