проблема вложенности css

Question

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

Приглушенный CSS:

#outerdiv{ padding:10px; background-color: #ddd;}
#outerdiv a:link{ color:blue; }

.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}

Приглушенный HTML:

   <div id="outerdiv">
        OUTERDIV <a href="#">link</a>
        <div class="innerdiv">
            INNER DIV <a href="#">link</a>
        </div>
    </div>

JSFiddle: http://jsfiddle.net/5S6ez/1/

Как мне сделать, чтобы мои innerdiv ссылки имели красный шрифт?

Моя ссылка сохраняет как можно больше стилей своих дедушек и бабушек, хотя к ней применены новые стили, которые появляются позже в файле CSS. Почему?

Answer 1

Проблема в том, что селектор на основе id более специфичен, чем селектор на основе имени класса, чтобы изменить его, используйте:

#outerdiv .innerdiv a:link{ color: red; background-color:White;}

Answer 2

Попробуйте создать классы outerdiv вместо идентификаторов. Как это:

.outerdiv{ padding:10px; background-color: #ddd;}
.outerdiv a:link{ color:blue; }

.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}

Если это не вариант (внешний div должен быть идентификатором), тогда вы можете попытаться сделать правила innderdiv более специфичными для externaldiv, например:

#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}

Кроме того, меня недавно познакомили с этой статьей, и она действительно очень помогла мне с CSS в целом:

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 3

Используйте ссылку, а не ссылку:: link - это псевдокласс для непосещенных ссылок.

Кроме того, просто для справки, которая может помочь вам с другими вещами, имейте в виду, что теги также являются встроенными элементами, а не стилизуют их с помощью заполненияи т. д., если вы не установите «display: inline-block» или «display: block».Да, немного больше, чем вы просили, но все еще может быть полезным.