Как отключить наследуемые стили CSS?

Question

Так я создаю контейнер со скругленными углами, используя следующий метод:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div div div { 
    padding: 10px; 
} 

Теперь я хочу использовать DIV внутри моего контейнера:

.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

<div class='round'><div><div><div> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Однако, я положил DIV внутри моего вложенные divs, кнопка имеет bl-изображение в углу.

Как удалить унаследованное фоновое изображение?

Answer 1

Простой ответ заключается в изменении

div.rounded div div div { 
    padding: 10px; 
} 

в

div.rounded div div div { 
    background-image: none; 
    padding: 10px; 
} 

Причина в том, что когда вы делаете правило для div.rounded div div это означает каждыйdiv элемент вложен внутри div внутри div с классом rounded, независимо от гнездования.

Если вы хотите нацелиться только на div, который является прямым потомком, вы можете использовать синтаксис div.rounded div > div (хотя это поддерживается только более поздними браузерами).

Кстати, вы обычно можете упростить этот метод, чтобы использовать только два div s (по одному для верхнего и нижнего или левого и правого), используя метод, называемый Sliding Doors.

Answer 2

Дайте div, что вы не хотите, чтобы он наследовал имущество фон тоже.

Answer 3

Чистое решение, вероятно, должно указывать ваши div как точные дети.

Попробуйте это изменить:

div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

Для этого:

div.rounded > div > div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

Answer 4

каскадные таблицы стилей предназначены для наследования. Наследование является неотъемлемой частью их существования. Если бы он не был построен как каскадный, их можно было бы назвать «Таблицами стилей».

Если унаследованный стиль не соответствует вашим потребностям, вам придется переопределить его другим стилем ближе к объекту. Забудьте о понятии «блокирование наследования».

Вы также можете выбрать более гранулированное решение, предоставив стили каждому отдельному объекту, а не придавая стилям общие теги, такие как div, p, pre и т. Д.

Например, вы можете использовать стили, которые начинаются с # для объектов с определенным ID:

<style> 
#dividstyle{ 
    font-family:MS Trebuchet; 
} 
</style> 
<div id="dividstyle">Hello world</div> 

Вы можете определить классы объектов:

<style> 
.divclassstyle{ 
    font-family: Calibri; 
} 
</style> 
<div class="divclassstyle">Hello world</div> 

Надеется, что это помогает.

Answer 5

Если вы управляете как HTML, так и CSS, я бы предложил переключиться на использование ID на всех div, необходимых для закругленного угла.

CSS

#d1 { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
#d2 { 
    background: url('br.gif') no-repeat bottom right; 
} 
#d3 { 
    background: url('bl.gif') no-repeat bottom left; 
} 
#d4 { 
    padding: 10px; 
} 

HTML

<div id="d1"><div id="d2"><div id="d3"><div id="d4"> 
    <div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Answer 6

Простейшие является классом-римента все дивы:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div.br { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div.br div.bl { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div.br div.bl div.inner { 
    padding: 10px; 
} 
.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

, а затем использовать:

<div class='round'><div class='br'><div class='bl'><div class='inner'> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div>