对覆盖CSS样式感到困惑

Question

I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.

First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...

.CoolL .Caption, .CoolR .Caption { color: #900; }

Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:

.Black { background: #000; color: #fff; }

Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...

<div class="CoolR Plus Max300">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Black">Text</div>
  </div>
</div>

In fact, the background is displaying black, but the text color is still brown.

I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...

.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }

What am I missing? Thanks.

Answer 1

I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.

.caption {
  color: #000;
}

.cool-caption {
  color: #900;
}

.caption-with-background {
  background-color: #000;
  color: #fff;
}

Answer 2

你可以尝试：

.Black { background: #000 !important; color: #fff !important; }

Answer 3

There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important . With that, your code would look like this:

.Black { 
    background: #000; 
    color: #fff; 
}

Also, not sure if you asked this, but you can apply CSS to all components by using the * , like so:

* {
    //blahblahblah
}

Answer 4

you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:

  
.CoolR1 .Black, .Black{ background: #000; color: #fff;}

/** you could also chain your classes for specificity power **/  
.Black.Caption{color:#fff}

that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors

Answer 5

I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black . You'll probably be able to override this with !important , but a better style might be to reduce the complexity of your rules:

.Cool .caption { color: #900; }

.Cool .caption.black { color: background: #000; color: #fff; }

And put .L and .R in separate classes

.Cool.L { . . . } /* .Cool.L { . . . } /* For things specific to CoolL , but not CoolR */

.Cool.R { . . . } /* and vice-versa * .Cool.R { . . . } /* and vice-versa * /