html – 在锚标记内设置范围

发布时间：2020-12-14 22:43:03 所属栏目：资源来源：网络整理

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

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

这是我的HTML.

        
还有我的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阻止锚的悬停事件,并且不可点击.


最佳答案
对您的示例代码进行测试(添加一个包含id的合适div)似乎工作正常：
http://jsfiddle.net/44ndf/1/
它的默认样式当然与锚点相同,因此您可能需要将事物重新设置为正常.您必须为我们提供一个工作(或更准确地说不工作)的样本,以便能够精确缩小您的问题所在.
总之,要检查的内容包括：
1)您的选择器肯定指向正确的元素(例如,在上面我必须包含一个ID为“leftNav”的div,以使选择器选择它
2)你明确地没有相互冲突的风格 – 可能是具有更高优先级的东西,或者可能具有重要覆盖它的东西.
3)使用Firebug确切地查看哪些样式正在应用哪些CSS选择器来识别问题所在.
编辑：
在下划线的情况下,似乎不可能(或者至少我没有找到)覆盖样式.所以我改变了标记：
http://jsfiddle.net/44ndf/2/


使用此标记,您可以按如下方式设置样式：

#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来自锚点的下划线没有被覆盖.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!