Почему css не работает над «родительским» div?

Question

У меня есть класс, который будет использоваться несколькими элементами DOM, конечно. Я создал класс .highlight и каждому выделенному div, я добавил уникальный id.

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
} 

Каждый идентификатор имеет свой background-image с помощью CSS. Я хотел бы использовать свойство css background: cover;, чтобы заполнить все пространство изображением.

Я думал, что это сработает, если вы добавите свойство обложки в div .highlight, потому что id добавлен в тот же div и поэтому мне не нужно добавлять свойство обложки каждый раз к каждому id в css, но это не сработает. Любые мысли, почему это не работает.

Я говорю о следующем:

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
} 

Thnx!

Answer 1

background: url('../images/pixel.jpg') no-repeat center; 

Это перезапись background-size правила в предыдущем, менее конкретном селекторе .highlight. Вместо того, чтобы использовать сокращенную в .highlight#<id>, вы можете использовать его для установки фона по умолчанию на всех .highlight элементов, то конкретно при объявлении изображения, например:

.highlight { 
    ... 
    background: no-repeat center/cover; 
} 

.highlight#pixel { 
    background-image: url('../images/pixel.jpg'); 
} 

Answer 2

Использование background сокращенную CSS перепишет все фоновые свойства, имеют под .highlight. Для ваших конкретных идентификаторов div используйте полные свойства фона, а не shortand.

.highlight#pixel 
{ 
    background-image: url(''); 
    ... 
} 

например.