Question

I have an Html that contains something like: (Multiple divs within div A).

<div class="a">
    <div class="b"></div>
</div>

我想:

.a div {
    border: solid;
    border-width: thin;
}

.b {
    border: none;
    border-width: 0px;
    border-collapse: collapse;
}

For some reason b s values will not override a. however, if i just write a rather than "a .div" i won t get the behavior expected for the other divs inside a.

The only way i got this to work is using "important!" (ie "border: none!important";) but that seems less than elegant.

热爱对那里正在发生的一切的想法。

Ehud。

Answer 1

.a div has a higher specificity than .b.
If you want the css for .b to override the .a one, give it a higher specificity still, for instance .a div.b.

(你可以使用<代码>! 进口, 是,但此处不建议这样做)

Answer 2

你的挑选者是错误的。

不

a. div {

Write

div.a {

(select any div with a class of "a")

不

b {

(这实际上将试图打上所有b 内容)

用途

.b {

(这是指选择“b”类定义的任何东西)

<>strong>EDIT(回应)

选择与“a”类分离的四分之三,使用以下选择:

div.a div

Answer 3

<>Specificity s分由中央支助事务汇编者计算,宣言中的最高分数用于修改内容。

核心一般按这一顺序计算:

inline   id-element   class-element   no.-of-elements
  $          $             $                $

($) -> 1 if the respective type of specificity exists in code
($) -> 0 if the respective type of specificity doesn t exists in code

So here
for .a div score will be 0012
for .b score will be 0011
Clearly first one wins so it gets to modify the content even though .b tries to override .a div

(OR)

you can use !important in the declaration to finalize that declaration

友情链接