使用CSS修改含内部元素的链接点击背景色不生效如何解决

问题原因 #

你写的CSS选择器逻辑错误：.nhsuk-card__link a:active 指代的是「class为nhsuk-card__link的元素内部的a标签激活状态」，但你的HTML里nhsuk-card__link本身就是a标签的类名，自然匹配不到任何元素，样式不生效。
另外a标签默认是行内元素，内部包含块级元素时，默认尺寸不会包裹内部块级内容，即使选择器写对，背景色也无法覆盖整个卡片区域。

修复方法 #

修正选择器，同时补充a标签的布局属性即可，代码如下：

/* 把a标签转为块级元素，撑满父容器，保证背景覆盖所有内部内容 */
a.nhsuk-card__link {
  display: block;
}

/* 匹配当前a标签的激活状态，设置黄色背景 */
a.nhsuk-card__link:active {
  background-color: #ffeb3b !important;
}

/* 可选：如果内部的nhsuk-card__content有默认背景色，添加以下代码让黄色背景透出 */
a.nhsuk-card__link:active .nhsuk-card__content {
  background-color: transparent !important;
}

如果NHSUK框架自带的卡片样式优先级更高导致还是不生效，可以给选择器增加父类前缀提升优先级：

.nhsuk-card--clickable a.nhsuk-card__link:active {
  background-color: #ffeb3b !important;
}

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