如何为包含活动链接的跨度应用css样式[重复]
Posted
技术标签:
【中文标题】如何为包含活动链接的跨度应用css样式[重复]【英文标题】:How to apply css style for a span containing an active link [duplicate] 【发布时间】:2015-03-07 11:47:15 【问题描述】:我目前有 2 个链接包含在 2 个跨度内,但是当一个链接被单击时禁用,该链接有一个类“linkActive”。我需要为包含活动链接的跨度应用一个边框,如何在 css 样式中做到这一点
html
<div>
<span class="sec">
<a>Link1</a>
</span>
<span class="sec">
<a class="linkActive">Link2</a>
</span>
</div>
我想将边框应用于包含带有链接活动类的锚标记的跨度
i tried span.sec a.linkActive
border-bottom: 3px solid black;
它似乎不起作用。任何帮助将不胜感激
【问题讨论】:
css 中没有父选择器。您可以为此使用 jquery。否则,只需像您发布的那样将边框应用于您的锚。您的代码正在运行。 jsfiddle.net/cdku8agp Doggone 它,我的意思是 ***.com/questions/1014861/… 是骗子。标记对话框,你没有工作吗? 【参考方案1】:您可以使用伪元素为自身添加边框
div span
display: inline-block;
div span a
display: block;
padding: 10px 20px;
position: relative;
div span a.linkActive:after
content: '';
position: absolute;
width: 100%;
background: black;
height: 3px;
bottom: 0;
left: 0;
<div>
<span class="sec"><a>Link1</a></span>
<span class="sec"><a class="linkActive">Link2</a></span>
</div>
【讨论】:
【参考方案2】:你不能只通过 CSS 来影响父元素,你必须使用 js。
jQuery
$('span.sec > a').click(function()
$(this).closest('span').css('border-bottom': '3px solid black');
)s;
【讨论】:
【参考方案3】:http://jsfiddle.net/ubyxcaor/
使用 CSS 选择器 [class=linkActive]
<style>
span a[class=linkActive] border: solid thin green;
</style>
【讨论】:
以上是关于如何为包含活动链接的跨度应用css样式[重复]的主要内容,如果未能解决你的问题,请参考以下文章