Наследование CSS: переопределение родительского селектора, который является селектором потомков

Как я могу использовать эту ссылку с помощью селектора дочерних элементов без изменения или удаления родительского селектора? (Я хочу ссылку, чтобы быть синим.)Наследование CSS: переопределение родительского селектора, который является селектором потомков

<html> 
    <head> 
     <style> 
      .parent a { color:Red; } 
      .child { color:Blue; } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <a class="child" href="http://www.stackoverflow.com"> 
       stackoverflow 
      </a> 
     </div> 
    </body> 
</html>

Это удивительно для меня, что родитель отвергает ребенка в этом случае!

источник

2010-02-26 Robert Claypool

Родитель переопределяет ребенка, потому что «.parent a» более специфичен, чем «.child». Как указал Obalix, вам нужно сделать свой детский селектор более конкретным, и a.child сделает это. –

Использовать a.child в качестве селектора.

<html> 
    <head> 
     <style> 
      .parent a { color:Red; } 
      a.child { color:Blue; } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <a class="child" href="http://www.stackoverflow.com"> 
       stackoverflow 
      </a> 
     </div> 
    </body> 
</html>

источник

2010-02-26 21:41:10 AxelEckenberger

Это связано с особенностями CSS. Дополнительный a после .parent делает его более конкретным, чем просто .parent, и, соответственно, более конкретный, чем только .child. Предложение Obalix дает селекторам ту же специфичность, причем оба имеют базовый HTML-элемент и обозначение класса. Когда специфика равна, она затем применит самое глубокое значение, указанное в иерархии, как вы ожидали.

Эта статья (и ресурсы, на которые имеются ссылки) делают большую работу объясняя CSS специфику: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

источник

2010-02-26 21:49:12

для будущего, исследуя http://css-tricks.com/specifics-on-css-specificity/

в основном вы можете рассчитывать значение селекторов в этом порядке

Inline | ID | Class/pseudoclass | Element 
1  | 1 | 1     | 1

где Inline = 1000, ID = 100, класс = 10, элемент = 1

В вашем случае .parent a == 11 и .child == 10 Вот почему родитель переопределяет стиль дочерних элементов.

источник

2012-04-16 23:13:59 Giedrius

Наследование CSS: переопределение родительского селектора, который является селектором потомков

ответ

Смежные вопросы