Переопределение свойств в CSS

#iddiv span {
    display: inline-block;
    width: 190px;
}
.myclass {
    width:10px;
}

тогда у меня есть 

<div id="iddiv">
    <span>hello:</span> 
    <span class="myclass">yeah</span> <br/>
</div>

Я хотел бы первый span ' s width быть 190px, а второй - 10px. Но оба 190px: почему он не переопределяет width propoerty?

EDIT: Спасибо за ваши ответы. Как насчет сбивающей ширины? Я не хочу ширину 10px, просто ширину по умолчанию, как если бы она была неопределенной

10
css

6 ответов

потому что id + selector (#iddiv span) более специфичен, чем класс. Либо

#iddiv span.myclass

или 

#iddiv .myclass

должно работать для этого случая.

Узнайте больше о специфике CSS здесь или в Гугле.

10

вы всегда можете использовать !important флаг переопределение:

.myclass {
    width: 10px !important;
}
24

CSS применяет стили в соответствии со спецификой селекторов

#iddiv span более конкретную, чем myclass. Изменение его на #iddiv .myclass должен исправить проблему для вас.

вот статья, которая идет более подробно об этом : http://htmldog.com/guides/cssadvanced/specificity/

4

Он не работает, потому что первый стиль более конкретный.

чтобы исправить это, убедитесь, что вы нацелены на секунду!--0--> более непосредственно, как это

#iddiv span.myclass

http://jsfiddle.net/jasongennaro/5fe9A/

1

прежде всего, я бы предложил вам правильно нацелить свои селекторы, как предлагают другие.

но когда все остальное терпит неудачу, вы можете использовать !важно!--4-->.

1

Не забывайте использовать ключевое слово !важно, какие функции перезаписать родительские правила.

также вы можете определить свой "myclass" следующим образом:

#iddiv span.myclass {
    width:10px;
}
1