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

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

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-изображение в углу.

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

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

Ответ 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>

Надеюсь, что это поможет.

Ответ 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;
}

Ответ 4

Если вы управляете как 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>

Ответ 5

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

Ответ 6

Простейшим является class-ify все divs:

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>