Как я могу отключить унаследованные стили 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 внутри своих вложенных div, у кнопки появляется изображение 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 с (по одному для каждого сверху и снизу или слева и справа), используя технику под названием Раздвижные двери .

Answer 2

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

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

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

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

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

Если вы управляете как HTML, так и CSS, я бы рекомендовал перейти на использование идентификаторов на всех делениях, необходимых для округленного угла.

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 5

Проще всего сравнить все дивы:

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>

Answer 6

Дайте div, которому вы не хотите, чтобы он наследовал свойство background .