时间戳

首页 > 解决方案 > 边框颜色不改变JQuery

jquery - 边框颜色不改变JQuery

问题描述

$(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文件时，divison 周围的边框不会保持黑色，并且边框颜色：黑色在 chrome 的开发人员工具中被划掉

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

标签： jqueryhtmlcss

解决方案

放在selected下面red以避免red规则集覆盖selected的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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red colourbox"></div>

推荐阅读