Проблемы с CSS-стилем

Question

Я занимаюсь созданием сайтов в течение многих лет, и есть вещи, которые действительно меня раздражают и смущают.

Я установил стиль ссылки в файле css для содержимого div на моем сайте, и это успешно стилизируетlinks.

Однако, если я создаю span или div внутри этого div с новым стилем ссылок, мне приходится добавлять !important к различным атрибутам, которые я могу определить только методом проб и ошибок.

Есть ли способ обойти это или я делаю что-то не так?

Спасибо

Answer 1

Моя интуиция заключается в том, что у вас есть проблемы с вашим селектором специфичность .

Убедитесь, что ваши новые селекторы ссылок имеют более высокую специфичность, чем те, которые находятся во вложенном элементе.Обычно это означает использование селектора типа div.outerdiv div.innerdiv a.class, а не просто a.class и т. Д.

Например:

<div class="outer">
   <a class="outerlink" href="#">Outer Link</a>
   <div class="inner">
      <a class="innerlink" href="#">Inner Link</a>
   </div>
</div>

Если вы используете эти селекторы, у вас могут возникнуть проблемы (в зависимости от cssупорядочение и т. д.):

a.outerlink { **css here** }
a.innerlink { **css here** }

Даже если вы используете эти селекторы, работа не гарантируется, как вы хотите:

.outer a.outerlink {}
.inner a.innerlink {}

Однако эти селекторы должны работать лучше, обеспечивая ваши внутренние ссылкиПереопределить атрибуты:

.outer a.outerlink {}
.outer .inner a.innerlink {}

Убедитесь, что вы указали все атрибуты, которые вы хотите переопределить в .innerlink css.

Как только вы поймете специфику, сила темной стороны станет вашей.

Answer 2

Мне кажется, я знаю, о чем вы говорите, и я решаю эту проблему, добавив «a» после внутреннего span или div css. Предположим, у вас есть общее правило:

a
{
    color:white;
}

Если вы хотите переопределить это правило в div, вы должны написать

div a
{
    color:yellow;
}

а не только

div
{
    color:yellow;
}

Это связано с тем, что ссылка находится внутри элемента div, поэтому первое правило для ссылки является более строгим, чем третье.