Question

我需要将文字颜色从红色切换到绿色，反之亦然。

long

CSS

<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

JS

#logoup{
    color:red;
}
.greened{
   color:green;
}

不起作用。控制台是空的。

jsfiddle

Answer 1

在CSS中，id定义的样式优先于类定义的样式。你可以简单地将类名附加到id来修复它，而不需要使用!important，这只应该作为最后的手段：

JS Fiddle

#logoup.greened {
  color: green;
}

Answer 2

Activity比id占据更高的css特异性。所以类不能过度规则id设置的样式。以下更改将起作用

<强> CSS

class

<强> HTML

.logoup{    // id changed to class
    color:red;
}
.greened{
   color:green;
}

JSFIDDLE

Answer 3

您可以在绿色上使用重要内容，或者您可以使用类控制着色，而不是将其应用于元素。

方法1：在绿化的课程

上使用important!

＆＃13;

$("#btn").click(function() {
  $('#logoup').toggleClass('greened');
});

＆＃13;

#logoup {
  color: red;
}
.greened {
  color: green !important;
}

＆＃13;

<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

方法2：不要将颜色应用于ID，使用类

＆＃13;

$("#btn").click(function() {
  $('#logoup').toggleClass('red green');
});

＆＃13;

.red {
  color: red;
}
.green {
  color: green;
}

＆＃13;

<div id="logoup" class="red">DEEP</div>
<button id='btn'>CLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

当您使用id代替class时，您必须记住css规则优先级。应用具有最高CSS特异性的样式。不同元素的特异性定义如下：

ID attribute = 100
Class attribute = 10
Element = 1

要检查这个重写你的css：

#logoup{
    color:red;
}
.greened{
   color:green!important;
}

了解css rule priorities.

Answer 5

选择器优先级。使用!important;

覆盖它

$("#btn").click(function() {
  $('#logoup').toggleClass('greened');
});

.greened {
  color: green !important;
}
#logoup {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

如何切换文字颜色？

5 个答案:

方法1：在绿化的课程

方法2：不要将颜色应用于ID，使用类