Question

我试图让它看起来很漂亮，但我遇到了一个问题。我有一个span元素，在anchor标记内包含一个Subtitle或简短描述。不幸的是，它的样式与锚点相同，这不是我想要的样子。我已经尝试将样式应用于跨度本身，但它们似乎被锚样式覆盖。问题是当链接悬停时我不希望它被加下划线。

这是我的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

对您的示例代码进行测试（添加一个包含id的合适div）似乎工作正常：

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

它的默认样式当然与锚点相同，因此您可能需要将事物重新设置为正常。您必须为我们提供工作（或更准确的不工作）样本，以便能够精确缩小问题所在。

总之，虽然要检查的事项包括：

1）您的选择器肯定指向正确的元素（例如，在上面我必须包含一个id为“leftNav”的div，以使选择器选择它

2）你明确地说没有相互冲突的风格 - 可能是优先级较高的东西，或者可能是某些东西！重要的覆盖它。

3）使用Firebug确切地查看从哪个CSS选择器应用哪些样式来识别问题所在。

修改

在下划线的情况下，似乎不可能（或者至少我没有发现）覆盖样式。所以我改变了标记：

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上。我怀疑有一些特别的abotu来自锚点的下划线没有被覆盖。

Answer 2

不确定是什么问题，因为我无法看到样式锚标记有什么，但您可以在css规则之后尝试!important。像这样：

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

在锚标记内设置范围

2 个答案: