我目前正在开发一款货币转换器应用程序，并尝试为货币添加旗帜图标。我正在使用 SelectBoxIt jQuery 插件来做到这一点。
问题是每当我使用 SelectBoxIt 插件时，选择选项下拉样式会发生冲突，请参见下文。
查看选项如何水平折叠
令人惊讶的是，如果我删除指向我的 CSS 文件的链接，插件会神奇地工作。
知道如何解决这个问题吗？
完整代码见下方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css" />
</head>
<body onload="convertDineroBottom()">
<div id="containerSelect">
<select id="from" onchange="convertDineroBottom()" >
<option value="EUR" data-iconurl="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg">EUR</option>
<option value="USD" data-iconurl="https://cdn.countryflags.com/thumbs/united-states-of-america/flag-400.png">USD</option>
<option value="GBP" data-iconurl="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/221487/910/607/m1/fpnw/wm0/united-kingdom-flag-1-.jpg?1414512427&s=f16b2cb24fd704ffcf14b18ee18b5f4e">GBP</option>
<option value="JPY">JPY</option>
<option value="HKD">HKD</option>
</select>
<select id="to" onchange="convertDineroTop()">
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="JPY" selected>JPY</option>
<option value="HKD">HKD</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</body>
</html>
body{
background: linear-gradient(0deg, rgba(100,100,100,1) 0%, rgba(165,165,165,1) 46%, rgba(186,186,190,1) 49%, rgba(205,205,208,1) 50%, rgba(222,218,218,1) 58%, rgba(221,221,221,1) 91%, rgba(181,182,182,1) 100%);
height: 1080px;
}
nav{
background-color: turquoise;
}
ul{
list-style-type: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 70%;
margin: auto;
padding-top:5%;
}
li{
}
#logo{
}
#date{
}
#containerInput{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 40%;
margin: auto;
margin-top:10%;
}
input{
border: none;
height: 160px;
width: 220px;
background-color: #0e3d73;
color: white;
font-size:2em;
text-align: center;
}
#arrow{
margin-top:9%;
}
#arrow img{
height:50px;
width:50px;
}
#containerSelect{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
width: 40%;
margin: auto;
margin-top:2%;
}
select{
width: 220px;
height: 40px;
}
function convertDineroBottom() {
var fromCurrency = document.getElementById("from").value;
var toCurrency = document.getElementById("to").value;
fetch("https://api.exchangeratesapi.io/latest?base=" + fromCurrency)
.then((resp) => resp.json())
.then(function(data){
(fromCurrency===toCurrency) ?
document.getElementById("toQuantity").value = document.getElementById("fromQuantity").value :
document.getElementById("toQuantity").value = data.rates[toCurrency]*document.getElementById("fromQuantity").value;
})
.catch(function(error) {
console.log(error);
});
}
function convertDineroTop() {
var fromCurrency = document.getElementById("from").value;
var toCurrency = document.getElementById("to").value;
fetch("https://api.exchangeratesapi.io/latest?base=" + toCurrency)
.then((resp) => resp.json())
.then(function(data){
//if both currencies are the same return identical values
(toCurrency===fromCurrency) ?
document.getElementById("fromQuantity").value = document.getElementById("toQuantity").value :
//otherwise return the top value as the multiplication of top currency rate by the amount specied below
document.getElementById("fromQuantity").value = data.rates[fromCurrency]*document.getElementById("toQuantity").value;
})
.catch(function(error) {
console.log(error);
});
}
$(function() {
var selectBox = $("select").selectBoxIt();
});
最佳答案
css 经常会发生冲突。每当发生这种情况时，您都有几个选择，尽管它们都等于同一件事:比糟糕的 css 更强大。
做到这一点的最好方法是更具体:
span {
display: inline-block;
background: red;
height: 30px;
width: 30px;
}
div span {
background: blue;
}
div > span {
background: green;
}<span></span>
<div>
<h1><span></span></h1>
<span></span>
</div>在上面的例子中，span 是最不具体的，div span 是比较具体的，div > span 是最具体的。弄清楚有问题的 css 有多具体，并且比它更具体。
或者，使用 !important，但确实不建议这样做。
关于jquery - SelectBoxIt 与 CSS 文件冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57559604/