如何阻止CSS中的背景覆盖？

时间：2017-01-22 01:55:05

标签： html css

所以我有这部分代码：

.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}
#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>

正如你所看到的那样，我的“宝藏室”按钮（空白按钮）并不像它所设想的那样（黑色背景和白色文字）。我认为类.tabButton背景颜色比写.active类的黑色背景颜色更重要。有人可以帮我这个吗？谢谢！

2 个答案:

答案 0 :(得分：3)

您可以通过多种方式为.active优先级提供css。

  1. 用它添加另一个相同元素的类。这意味着替换 .active与.tabButton.active。
  2. 在.active。
    3. 的css下方声明.tabButton的css
  3. 使用直接子（>）运算符来声明它。这意味着替换 .active与#tab a>.active
    4. 。{
  4. 在!important
    5. 的css规则之后添加.active

    这是工作代码段，只有css中的第一行被更改。

    ＆＃13;
    ＆＃13; 
    .tabButton.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}


#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
    ＆＃13; 
    <!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：1)

快速解决方法是在您的CSS中.tabButton前添加.active：

＆＃13;
＆＃13; 
.tabButton.active {
	background-color: black;
	color: white;
}
span {
	margin: 10px;
}
a {
	text-decoration: none;
}
.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tabButton {
	margin: 2px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	background-color: white;
}
#shop, var {
	font-style: normal;
}
button {
	font-size:15px;
	margin :3px;
}
＆＃13; 
<!DOCTYPE HTML>
<!--
                     Idle RPG
                    ==========
               Copyrigh Az 2016
               Inprise by Candy Box and A Dark Room
               If you have interest in making more games like this, join my Studio :D
               Studio Group: https://az-gamestudio.slack.com
-->
<!--
HEY! YOU'RE LOOKING AT THE SOURCE CODE! cheater ;)
You're gotta go through ME, the DEVELOPER if you want to change the CODE!!!! MUAHAHAHAHA
You're not going to past this laser! It burns every thing it TOUCH!!!


      im one of the player. I tried to cheat but i can't just walk past this laser :( 
   \o/
|/=======================================================================\|
WHAT!! YOU JUST WALK PAST IT????
UNFAIR!!
Be careful, don't cheat too much...
My code is too easy to change sooooo....
"You made the developer bored. He gave up."
-->
<HTML style="font-family:sans-serif">
<head>
<title>Idle RPG</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<script src=Scripts/gameScript.js> </script>
<link rel="stylesheet" href=Scripts/pageStyle.css>
<body>
<div id='tab' style="text-align: center;">
<a href="index.html">
  <button class='tabButton active'>Treasure room</button>
</a>
<a href="inventory.html">
  <button class='tabButton'>Inventory</button>
</a>
<a href="map.html">
  <button class='tabButton'>Map</button>
</a>
<a href="quest">
  <button class='tabButton'>Quest</button>
</a>
</div>
<p id="numberOfCoins">You got 0 coin</p>
<p id="numberOfGolds">You mined 0 gold</p>
<button id="get1Coin" onclick="addCoins()">Collect a coin.</button>
<button onclick="throwCoins()">Throw 10 coins away.</button>
<button style=display:none id="add10Coins" onclick="add10Coins()">Get 10 coins.</button>
<br>
<div style=float:right; id="resources">
<form>
  <fieldset>
    <legend id="resource"><h3>RESOURCES</h3></legend>  
    <span>Iron: <var id='numberOfIrons'>0</var>
    <br><br>
    <span>Silver:  <var id='numberOfSilver'>0</var>
    <br><br>
    <span>Coal:  <var id='numberOfCoal'>0</var>
    <br><br>
  </fieldset>
</form>
</div>
<div id="goldMine">
    <pre style= border: 3px solid black>
_GOLD MINE_       _IRON MINE_       _GOLD MINE_       _IRON MINE_
|         |       |         |       |         |       |         |
|         |       |         |       |         |       |         |
    </pre>
</div>
<div style=display:none id="shop">
	<pre>
<h2>SHOP</h2>
"Hi, im a blacksmith. I see you have a lot of coins, so i think that you might be interest in my weapons!"
Buy a item to unlock a new item!
<div id='woodenSword'>
Wooden Sword		    
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
'--8--'
   8
   O
Cost: 2000 coins    
<button id="buyWoodenSword" onclick='boughtWoodenSword();' disabled>Buy</button>
</div>
<div id='ironSword'>
Iron Sword
   .
  / \
  | |
  | |
  |.|
  |.|
  |:|
  |:|
 _|*|_
\--+--/
   8
   8
   O
Cost: 50 Golds
<button id="buyIronSword" onclick="boughtIronSword();" disabled>Buy</button>
<div>
	</pre>
</div>
</HTML>
＆＃13;
＆＃13;
＆＃13;

否则，您可以!important使用background-color规则：

.active {
    background-color: black !important;
    color: white;
}

但我强烈建议使用第一种解决方案。

相关问题
最新问题