如何为<a>标签内与h6同行的普通文本设置CSS样式？

云原生阿岚

2026-7-21

问题分析与解决方案

你的核心问题是CSS选择器使用错误，导致样式作用在了整个<a>标签上，而非目标普通文本。

错误原因

.uagb-tax-link:not(h6)这个选择器的逻辑是：选中所有带有.uagb-tax-link类、且本身不是<h6>标签的元素——也就是<a>标签本身。给<a>添加背景和内边距后，由于<h6>是块级元素，会独占一行，导致<a>的背景被<h6>分割成上下两块，出现你看到的异常。

正确解决方案

CSS无法直接选中独立的文本节点，因此最可靠的方法是给普通文本包裹一个<span>容器，再针对性设置样式：

修改后的HTML

<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="tax-count">" 16 Projectes "</span>
    </a>
</div>

对应的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;
  /* 可选：让h6和文本在同一行显示 */
  display: inline-block;
  margin-right: 8px;
}

/* 只给普通文本所在的span设置样式 */
.uagb-tax-link .tax-count{
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
  /* 可选：调整行高与h6对齐 */
  line-height: 1.5;
}