如何用外部CSS覆盖WordPress特定区块的行内a标签样式

我在WordPress网站中，全局行内a标签默认是黑色样式，想仅通过外部CSS把id为text-1714962803的特定区块内的a标签改成白色。试了下面的CSS但没生效：

#text-1714962803 a {
    color:  #FFFFFF !important;
}

对应的HTML代码如下：

<div id="text-1714962803" class="text">
        
<h2 style="text-align: left;"><span style="font-family: ivyora-light; font-size: 100%; color: #000000;">LULLY & ROSE Florist, nestled in the heart of the Gold Coast, a perfumed haven of <a href="https://lullyandrose.com.au/shop-3/fresh-flowers-flower-delivery-gold-coast/" data-wpel-link="internal">premium flowers</a>, <a href="https://lullyandrose.com.au/shop-3/plants-indoor-plant-delivery-gold-coast/" data-wpel-link="internal">indoor plants</a> & thoughtfully curated Australian <a style="color: #000000;" href="https://lullyandrose.com.au/shop-3/gift-hampers-gift-hamper-delivery-gold-coast/" data-wpel-link="internal">gift hampers</a>.</span></h2>
<p><span style="color: #000000;">   </span></p><div id="gap-1211602490" class="gap-element clearfix" style="display:block; height:auto;">
        
   
        </div>
        <p></p>
    <p style="text-align: left;"><span style="color: #000000;"><span style="font-size: 110%; font-family: europa-light;">With over 11 years of industry experience, we works closely with <a style="color: #000000;" href="https://www.google.com/maps/place/Queensland/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">Queensland flower wholesalers</a> and <a style="color: #000000;" href="https://www.septemberpeony.com" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">micro growers</a> throughout the <a style="color: #000000;" href="https://www.google.com/maps/place/Gold+Coast+QLD/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">Gold Coast</a> Hinterland and the Northern NSW region, to source the freshest and highest quality, where every flower is personally hand-selected by us, and lovingly designed by owner and lead floral designer, Rachael. We offer same day Gold Coast flower delivery, delivered by our specialised couriers to ensure your flowers are handled with love and delivered with care.</span><span style="font-size: 120%;"><span style="font-size: 110%; font-family: europa-light;">&nbsp;</span><br>
    </span></span></p>
    <p><span style="color: #000000;">   </span></p><div id="gap-1116439380" class="gap-element clearfix" style="display:block; height:auto;">
            
    <style>
    #gap-1116439380 {
      padding-top: 60px;
    }
    </style>
        </div>
        <p></p>
    <p><span style="font-size: 120%; color: #000000;"><a href="https://lullyandrose.com.au/our-story-gold-coast-florist/" class="button white is-outline" style="border-radius:99px;" data-wpel-link="internal">
        <span>FIND OUT MORE</span>
      </a>
    
    </span><br>
    <span style="color: #000000;"><br>

你的CSS没生效是因为部分a标签自带行内样式（style="color: #000000;"），还有父级span也设置了行内黑色，当前选择器的权重不足以覆盖这些样式。可以用以下几种方法解决：

• 方法一：精准匹配带行内样式的a标签

#text-1714962803 a[style] {
    color: #FFFFFF !important;
}

这个选择器专门定位带有行内style属性的a标签，加上!important能强制覆盖行内样式。

• 方法二：同时覆盖父级span和a标签的颜色

#text-1714962803 span,
#text-1714962803 a {
    color: #FFFFFF !important;
}

这种写法会把区块内所有span和a标签的颜色都改成白色，不管它们有没有行内样式。

• 方法三：不用!important，用更具体的层级选择器

#text-1714962803 h2 span a,
#text-1714962803 p span a {
    color: #FFFFFF;
}

通过精确匹配a标签所在的层级结构，提升选择器优先级，避免使用!important。

内容的提问来源于stack exchange，提问作者Chrissa