Как отключить унаследованные стили 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, я бы предложил переключиться на использование идентификаторов во всех элементах 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 5

Укажите div, который вы не хотите, чтобы он унаследовал собственность. фон слишком.

Answer 6

Проще всего классифицировать все элементы div:

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>