Div Уникальные ссылки в стиле CSS

Question

Я хочу создать уникальные стили для моих ссылок в одном конкретном div (так, например, я хочу, чтобы все ссылки были выделены жирным и красным цветом в основном теле, но в sidebardiv я хочу, чтобы они были синим и курсивом) Как мне это сделать?

У меня есть:

a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}

однако, если я добавлю это в раздел div боковой панели, это испортит мои} 1006 *

Answer 1

Использовать селекторы потомков :

#sidebar a:link{ color:#134896; } 
#sidebar a:visited{ color:#330033; } 
#sidebar a:hover{ color:#942A5F; } 
#sidebar a:active{ color:#6FB25C}

Это основной тип селектора css, и вы можете связать столько селекторов-потомков, сколько пожелаете, т. Е .:

#content .navigation .header h1.red {
  /* Properties */
}

Это будет соответствовать любому <h1 class="red">, который является потомком элемента с классом header, который является потомком элемента с классом navigation, который является потомком элемента с идентификатором content.

Селекторы потомков - это один из немногих типов селекторов, который действительно работает в разных браузерах, поэтому вы можете на них положиться. Следует отметить, что для достижения цели у вас должно быть как можно меньше селекторов, так как это повысит производительность. Кроме того, постарайтесь не указывать тип элемента, если вы можете избежать его (это противоречит рекомендации для селекторов JavaScript), поскольку это свяжет ваш CSS с тем, как теперь выглядит HTML. Разработчик может решить заменить <span class="highlight"> на <em class="highlight"> позже, что приведет к поломке span.highlight -селектора, в то время как .highlight -селектор будет продолжать работать.

Answer 2

a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }

Answer 3

a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }

Answer 4

div#div_id a:link {style}

Повторите это столько раз, сколько вам нужно для каждого div, и: visit,: active,: hover states.

Answer 5

#divId a:link{ color:#666666; }