css 如何样式化普通文本内联与一个h6内< a>

j13ufse2  于 2023-05-19  发布在  其他
关注(0)|答案(3)|浏览(127)

我有一个<a>元素,里面有一个h6和普通文本。如何设置普通文本部分的样式?我试图使用:not(h6)把填充和边界半径:20px和其他风格...我的CSS:

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link:not(h6){
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}
<div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
        " 16 Projectes "
        </a>
    </div>

但是看看下面的屏幕截图中发生了什么:

我怎样才能把这个做好?先谢谢你了

anhgbhbe

anhgbhbe1#

您可以给予显示:inline-block到“a”元素。如果你想给予背景只文本。然后将文本放入span元素中,并为其给予样式。下面是更新后的代码:-

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link:not(h6){
  display: inline-block;
    text-decoration:none!important;
    padding:5px!important;
    border-radius:20px!important;
}

a.uagb-tax-link h6{
    text-align:left!important;
}


.simple-text{
  background-color:#18419C!important;
  color: #fff;
}
<div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
          <span class="simple-text"> " 16 Projectes " </span>
        </a>
    </div>
oyxsuwqo

oyxsuwqo2#

可以使用position: absolute

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link {
  display: inline-block;
  margin-top: 80px;
  position: relative;
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
  color: #fff;
}
.uagb-tax-link h6 {
  position: absolute;
  top: -80px;
  color: #000;
}
<div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
        " 16 Projectes "
        </a>
    </div>
isr3a4wc

isr3a4wc3#

正如https://stackoverflow.com/users/16948533/developer所指出的,我需要在这里添加一个span,以正确地设置no-h6部分的样式。
然后我使用了类似于:

$('.uagb-tax-link').each(function() {
    var $link = $(this);
    var $textNodes = $link.contents().filter(function() {
      return this.nodeType === 3;
    });
    var $span = $('<span class="text-no-h6"></span>').text($textNodes.last().text());
    $textNodes.last().replaceWith($span);
  });

然后css get修改为:

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

span.text-no-h6{
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}

相关问题