html - 另一个元素内的 css 选择器

Question

自定义按钮内有两种颜色，第一种由按钮类定义，第二种由按钮内的跨度类定义，当按钮处于事件状态时如何更改这两种颜色？

CSS:

.buttonClass{
  color:black;
}
.buttonClass:active{
  color:white;
}
.spanClass{
  color:grey;
}
.spanClass:active{ //working only when I click on span, but not for whole button
  color:red;
}

HTML:

<button class="buttonClass">
  <span class="spanClass">
    black/white text
  </span>
  grey/red text
</button>

Answer 1

试试这个

.buttonClass:active .spanClass{
  color:red;
}