Question

我目前在2个跨度中包含2个链接，但是当单击链接时，该链接具有“linkActive”类。我需要为包含活动链接的范围应用边框，如何在css样式中执行此操作

     HTML
        <div>
           <span class="sec">
              <a>Link1</a>
           </span>
           <span class="sec">
             <a class="linkActive">Link2</a>
           </span>
        </div>

我想将border应用于包含带有链接活动类

的锚标记的span

 i tried    span.sec a.linkActive{
                 border-bottom: 3px solid black;
             }

它似乎不起作用。任何帮助将不胜感激

Answer 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>

Answer 2

您不能仅通过CSS影响父元素，您必须使用js。

的jQuery

$('span.sec > a').click(function() {
   $(this).closest('span').css({'border-bottom': '3px solid black'});
})s;

Answer 3

http://jsfiddle.net/ubyxcaor/

使用CSS选择器[class = linkActive]

<style>
span a[class=linkActive] {border: solid thin green;}
</style>

如何为包含活动链接的范围应用css样式

3 个答案: