Question

$(document).ready(function() {
  $(".red").addClass("selected");
});

.selected {
  border-color: black;
}

.red {
  border: 4px solid red;
  height: 30px;
  width: 100%;
  background-color: red;
}

.colourbox {
  height: 30px;
  width: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<script src="actions.js"></script>
<div class=" red colourbox">
</div>

问题

运行 HTML 文件时，分界线周围的边框不会保持黑色和边框颜色：chrome的开发人员工具中将黑色划掉了

添加所选类时如何更改边框颜色？

Answer 1

将selected放在red下方，以避免red规则集覆盖selected的{{1}}属性。

border-color

$(document).ready(function() {            
  $(".red").addClass("selected");     
});

.red {
  border: 4px solid red ;
  height: 30px;
  width: 100%;
  background-color: red;
}
.colourbox {
  height: 30px;
  width: 30px;
}
.selected {
  border-color: black;
}

Answer 2

尝试一下

您可以将.selected放在.red的底部，这样它将覆盖.red样式。或者像我一样使用嵌套。那会帮助你

$(document).ready(function(){
  $(".red").addClass("selected");  
});

.red {
    border: 4px solid red ;
    height: 30px;
    width: 100%;
    background-color: red;
}
.red.selected {
    border-color: black;
}

.colourbox {
    height: 30px;
    width: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red colourbox"></div>

Answer 3

这取决于您的要求。您需要问自己的是：

我是否总是需要黑色边框和红色正方形组合？

如果是这种情况，请使用此解决方案。不要定义.selected，而要定义.red.selected。在那种情况下，位置无关紧要。

$(document).ready(function() {
  $(".red").addClass("selected");
});

.red.selected {
  border-color: black;
}

.red {
  border: 4px solid red;
  height: 30px;
  width: 100%;
  background-color: red;
}

.colourbox {
  height: 30px;
  width: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red colourbox">
</div>

如果要独立应用黑色边框，则需要按以下方式构建代码：

$(document).ready(function() {
  $(".square").toggleClass("red selected");
});

.square {
  background-color: red;
}

.red {
  border: 4px solid red;
}

.colourbox {
  height: 30px;
  width: 30px;
}

.selected {
  border: 4px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square colourbox red">
</div>

边框颜色未更改JQuery

3 个答案: