如何为包含活动链接的跨度应用css样式[重复]答案

【问题标题】：How to apply css style for a span containing an active link [duplicate]如何为包含活动链接的跨度应用css样式[重复]
【发布时间】：2023-04-07 13:20:01
【问题描述】：

我目前有 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 它，我的意思是 stackoverflow.com/questions/1014861/… 是骗子。标记对话框，你没有工作吗？

标签： html css

【解决方案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>

【讨论】：