How do you determine what is overriding your style

问题:

This question already has an answer here:

• Chrome Developer Tools: How to find out what is overriding a CSS rule? 3 answers

When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).

I will encounter situations like this:

How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.

EDIT: I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.

EDIT: actual problem fixed, but the question still remains... is there an easier way to see what causes the override?

Fix: I just needed the selector in the proper order. .box first, then .box-blue.

回答1:

In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

Consider the following HTML:

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

You would see the following:

回答2:

You can scroll up or down the styles tab in Dev Tools you use from the above example to find the selector overriding .box-blue. Once you found the enabled border-color in another style, then you can determine what selector overriding it.

When you styled .box-blue with border-color: red for example, it could be overriden with another style with the possibly same property, border. Because border: 1px solid blue could be a shorthand for border-width: 1px + border-style: solid + border-color: blue, Then it could be the possibly overriding the previous style.

回答3:

There are browser extension that help with this. I use "Web Developer" in Firefox, but there are many others.

Chrome also has View > Developer > Developer Tools.

If you mouse over an item on the screen they will tell you its path (html > body > div.blah > span.foo) and what css styles were applied to that item.

回答4:

There's no definitive way to infer which selector overrides a given style (as far as I know), but the dev tools interface is intuitive enough that it's normally straightforward to work it out.

Your overriden style shows with a strike through. To find out which selector overrides it, look for an unstruck version of the same rule.

Sometimes this is as easy as seeing:

color: red;

And having to look for a selector with:

color: blue;

Chrome dev tools actually sorts the selectors by priority, so if you find an overridden, style you can be guaranteed that the override will be in the same selector or in one of the ones above it.

But you'll have to remember that some rules are composed of others and you won't always find a corresponding rule with the same name. In your example your border-color rule is being overriden by the border rule from the above selector. The border rule is shorthand for specifying border-width, border-style and border-color.

回答5:

In your image you can see the .box-blue class's border-color: #bce8f1 rule has been overridden by the border: 1px solid transparent (I cannot see the selector). You can see CSS files of the overridden CSS rules right side of the selectors in Inspect tool.

Sometimes CSS rules might be changed by the JavaScript. It might be shown as inline CSS.

回答6:

In Firefox Developer Tools you can find it out in one click near the overridden property in the Inspector:

Overridden declarations

Starting in Firefox 43, overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.

This makes it easy to see which rule is overriding the declaration:

https://www.youtube.com/watch?v=i9mDVjJAGwQ

Here's how it looks. Check out the video to see it in action.

回答7:

Here is a simple explanation.

Certain selectors will override existing ones for example

p {
  color: green;
}
.Paragraphs {
  color: yellow;
}
#paragraph2 {
  color: red;
}

<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>

As shown the selector p is overridden by selector .Paragraphs and the selector #paragraph2 overrides .Paragraphs and the style attribute overrides #paragraph2 and of course any selector with !important will override mostly everything.