兩個類不工作的元素的CSS選擇器

-1

我試圖對這些元素進行樣式化，並且具有兩個類的元素不能與具有一個類的元素的樣式不同。我試圖用.red.balls也選擇它，但它不起作用。兩個類不工作的元素的CSS選擇器

.ballsAll { 
 
    display: block; 
 
    margin-left: 14%; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.balls { 
 
    background-color: white; 
 
}

<div class='ballsAll'> 
 
    <p> 
 
    <span class='balls'>22</span> 
 
    <span class='balls red'>11</span> 
 
    </p> 
 
</div>

來源

2016-01-21 frontendgirl

'.red'和'.balls'的選擇器都具有特殊性，因此在CSS文件中最後定義的選擇器優先（並適用於兩者）。 – Harry

'.red.balls'作品https://jsfiddle.net/jjkvasyt/ –

如果'.red.balls'不起作用，其他事情就是錯誤的，你給出的內容並不能反映你的實際代碼。 – BoltClock

使用此代碼：

.ballsAll { 
 
    display: block; 
 
    margin-left: 14%; 
 
} 
 
.red.balls { 
 
    background-color: red; 
 
} 
 
.balls { 
 
    background-color: white; 
 
}

<div class='ballsAll'> 
 
    <p> 
 
    <span class='balls'>22</span> 
 
    <span class='balls red'>11</span> 
 
    </p> 
 
</div>

來源

2016-01-21 14:31:01

.red之前聲明.balls，就像這樣：

.ballsAll { 
    display: block; 
    margin-left: 14%; 
} 
.balls { 
    background-color: white; 
} 
.red { 
    background-color: red; 
} 


<div class='ballsAll'> 
    <p> 
    <span class='balls'>22</span> 
    <span class='balls red'>11</span> 
    </p> 
</div>

來源

2016-01-21 14:38:42 ttA01

兩個類不工作的元素的CSS選擇器

回答

相關問題