2016-01-21 2 views
-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>

+1

Оба селектора '.red' и' .balls' имеют спецификацию, и поэтому селектор, определенный последним в файле CSS, имеет приоритет (и применяется к обоим). – Harry

+1

'.red.balls' works https://jsfiddle.net/jjkvasyt/ –

+0

Если' .red.balls' не работает, что-то еще не так, и то, что вы дали, не отражает ваш фактический код. – BoltClock

ответ

0

Используйте этот код:

.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>

1

Объявить .balls перед тем .red, как это:

.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> 
Смежные вопросы