当div具有某个类时，更改div内部超链接的颜色属性

Question

当div应用了某个类别的rgSelected时，我想将div内部超链接的字体颜色更改为white。通常，如果没有rgSelected类别，超链接的颜色为红色。

问题

当div应用了rgselected类时，我如何确保超链接的字体颜色为白色，否则使其字体颜色为red？我不确定这是否可以通过纯CSS或与jQuery结合来实现。

<div class="alternatingItem rgSelected">
   <a onclick="sendEmail()" style="color:red;">Employee1<a>
</div>

Answer 1

您不需要jquery。我使用important是因为您在a元素中有内联样式，并覆盖了css规则中的样式。

.rgSelected a {
  color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alternatingItem rgSelected">
  <a onclick="sendEmail()" style="color:red;">Employee1<a>
</div>

Answer 2

/* 
  set default `css` property of `.alternatingItem` child `a` `color` to `red`
  if `.alternatingItem` does not have `class` `rgSelected`
*/
.alternatingItem:not(.rgSelected) a {
  color:red;
}
/*
  if `.alternatingItem` has `class` `rgSelected` , set 
  child `a` `css` property `color` to `white`
*/
.alternatingItem.rgSelected a {
  color:white;
}

---

function sendEmail() {}
$("a").click(function(e) {
  $(this).parent().toggleClass("rgSelected")
})

.alternatingItem:not(.rgSelected) a {
  color: red;
}
.alternatingItem.rgSelected a {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alternatingItem">
  <a onclick="sendEmail()">Employee1<a>
</div>