英文:
I need to colorize a specific item on my html
问题
我想着色按钮上的数字25 > <div class="key show-display">25</div>，就像数字15 > <div class="key show-display">15</div> 一样。
你能帮我吗？谢谢。
我需要在我的HTML上着色特定项目，但我做不到。
我需要在我的HTML上着色特定项目，但我做不到。
我需要在我的HTML上着色特定项目，但我做不到。
我需要在我的HTML上着色特定项目，但我做不到。
我需要在我的HTML上着色特定项目，但我做不到。
英文:
I want to colorize the button with number 25 > <div class="key show-display">25</div>
like a number 15 > <div class="key show-display">15</div>
Can you help me? Thanks.
I need to color a specific item on my html but I can't.
I need to color a specific item on my html but I can't.
I need to color a specific item on my html but I can't.
I need to color a specific item on my html but I can't.
I need to color a specific item on my html but I can't.
<div class="calc">
<div id="display" class="display">0</div>
<div class="keypad">
<div class="keys-row first-keys-row">
<div class="key clear-all">AC</div>
<div class="key show-display">80</div>
<div class="key show-display">85</div>
<div class="key show-display">90</div></div>
<div class="keys-row">
<div class="key show-display">20</div>
<div class="key show-display">25</div>
<div class="key show-display">30</div>
<div class="key show-display">35</div></div>
<div class="keys-row">
<div class="key show-display">5</div>
<div class="key show-display">10</div>
<div class="key show-display">15</div>
<div class="key calculate">=</div></div></div></div>
<style>
.calc {
color: #fff;
width: 400px;
padding: 10px;
background-color: #302d2d;
border: 10px solid #302d2d;
border-bottom: 5px solid #302d2d;
border-radius: 10px;
margin-left: 10px;}
.calc .display {
font-size: 40px;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: gray;
border: 10px solid gray;
border-radius: 10px;
color: black;
height: 80px;}
.keys-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;}
.keypad .keys-row .key {
background-color: #999191;
font-size: 35px;
text-align: center;
width: 95px;
line-height: 75px;
border-radius: 50px;
margin: 0 5px;
cursor: pointer;
user-select: none;}
.keypad :first-child :nth-child(1){
background-color: black;}
.keypad .keys-row .key:active{
background-color: #a5a5a590;}
.keypad :last-child :nth-child(4){
background-color: lightseagreen;}
.keypad :last-child :nth-child(4):active{
background-color: #17807a;}
.keypad :last-child :nth-child(3){
background-color: #b22222;}
.keypad :last-child :nth-child(3):active{
background-color: #801818;}
</style>
答案1
得分: 1
第一个 div:nth-child(2)，是选择.keypad内第二个DIV。
第二个 div:nth-child(2)，是选择DIV内的第二个按钮。
英文:
.keypad div:nth-child(2) div:nth-child(2) {
background: #b22222;
}
- The first
div:nth-child(2), is to select the second DIV inside.keypad - The second
div:nth-child(2), is to select the second button of the DIV
答案2
得分: 0
这可以是另一种选择：
<div class="keys-row second-keys-row">
<div class="key show-display">20</div>
<div class="key show-display">25</div>
<div class="key show-display">30</div>
<div class="key show-display">35</div></div>
<div class="keys-row third-keys-row">
<div class="key show-display">5</div>
<div class="key show-display">10</div>
<div class="key show-display">15</div>
<div class="key calculate">=</div></div></div></div>
<style>
.keypad .keys-row.second-keys-row .key.show-display:nth-child(2){
background-color: red;}
.keypad .keys-row.third-keys-row .key.show-display:nth-child(3){
background-color: red;}
</style>
英文:
this can be an other option:
<div class="keys-row second-keys-row">
<div class="key show-display">20</div>
<div class="key show-display">25</div>
<div class="key show-display">30</div>
<div class="key show-display">35</div></div>
<div class="keys-row third-keys-row">
<div class="key show-display">5</div>
<div class="key show-display">10</div>
<div class="key show-display">15</div>
<div class="key calculate">=</div></div></div></div>
<style>
.keypad .keys-row.second-keys-row .key.show-display:nth-child(2){
background-color: red;}
.keypad .keys-row.third-keys-row .key.show-display:nth-child(3){
background-color: red;}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论