Question

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

问题

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

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

Answer 1

你不需要jquery。我使用的很重要，因为你在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>

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

2 个答案: