如何为处于:active状态的元素的子元素设置样式？

当然可行，你的代码里有两个小错误导致效果没生效：

错误1：CSS选择器写错 #

你写的.my-button:active > button-value是在找名为button-value的HTML标签，但你的子元素是带button-value类的div，正确的选择器应该是**.my-button:active > .button-value**（注意类选择器前的.）。

错误2：HTML标签语法错误 #

第二个div的闭合标签写成了</div?，应该修正为</div>，语法错误会影响DOM结构解析。

修正后的完整代码 #

CSS

.my-button {
  width: 108px;
  height: 108px;
  border: 1px solid #000;
  padding: 17px;
  border-radius: 10px;
  background-color: transparent;
  transition-duration: 0.3s;
  text-align: left;
  cursor: pointer;
}
  
.my-button:hover {
  background-color: #ffffff;
  border: 2px solid #21a086;
}
  
.my-button:active {
  background-color: #21a086;
  border: 2px solid #21a086;    
}

.my-button:active > .button-value {
      color: white;
}

HTML

<button class="my-button">
  <div class="button-value">123</div>
  <div>My Title</div>
</button>

修正后，当按钮处于:active状态时，第一个div的文字就会变成白色，同时按钮背景色也会按预期变化。

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