jquery - 边框颜色不改变 JQuery

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>

Problem

在运行 HTML 文件时，divison 周围的边框不会保持黑色和边框颜色:黑色在 chrome 的开发人员工具中被划掉

How do I change the border colour on adding the selected class ?

Answer 1

将 selected 放在 red 下方以避免 red 规则集覆盖 selected 的 border-颜色属性。

$(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;
}

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