Выбор класса элементов зависит от другого своего класса

Question

я сделал некоторые ошибки и нужно знать, если может решить это :(

взгляд на этот HTML

<style> 
    .error { width:32px; height:32px; display:inline-block; } 
    /* This is icon class */ 
    </style> 

    <div class="error"> this Is error icon 32px * 32px </div> 

    <div class="error"> this Is error notice 500px * 35px </div> 

Как я могу сделать это осуществить первую ошибку класс и не влияют на второй

я это сделал

<style> 
    .error[class*='icon'] { width:32px; height:32px; display:inline-block; } 
     /* i was think it should effect the first class only but not ??? */ 
    </style> 

    <div class="icon error"> this Is error icon 32px * 32px </div> 

    <div class="notice error"> this Is error notice 500px * 35px </div> 

Есть другой способ я использовал.error[class*='icon']

Answer 1

Вы можете использовать .error.icon вместо .error[class*='icon'], хотя я не знаю, как ваш селектор атрибута мог повлиять на второй .error элемент.

Или если вы не хотите добавлять дополнительные классы, вы можете использовать .error:first-child вместо этого, считая, что в одном и том же контейнере нет других элементов-братьев.

Answer 2

div.icon.error является наиболее точным способом сделать это