当div具有特定类时，更改其中超链接的颜色属性

Question

我想将div内的超链接字体颜色更改为白色，当该div应用了特定的rgSelected类时。通常情况下，没有rgSelected类，超链接的字体颜色为红色。

问题：

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

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

- Sunil

Answer 1

你不需要使用jQuery来实现这个功能。我使用important是因为你在元素中有内联样式，需要覆盖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>

- Alex Char

---

虽然你是正确的，但值得注意的是你在此处使用了“直接后代”选择器。鉴于 OP 的示例代码，它可以工作，但在其他用法中可能会过于严格。 - Brad Christie

两种都可以；我可能比较随意地阅读了“div内的超链接”，只是想引起注意细节。 - Brad Christie

强烈建议查看Specificity。 - Alex Char

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>

- guest271314

---

给一个人一条鱼，他会吃一天。教一个人如何捕鱼，他将终身受益。-- 虽然提供解决方案很好，但也很重要为代码提供含义/上下文/洞察力。 - Brad Christie