Is there any way to find out where the css rule comes from?

Question

I inherited the .asp site, and I had to refresh the pages to move the forms in the tables to the sidebar.

It worked perfectly for everyone except one page, which stubbornly refuses to accept my CSS and takes values ​​from someone who knows where.

I tried debugging in Firefox / Chrome and even wrote the rules in the page header, but to no avail. Is there a tool to identify this kind of thing? I am not sitting with CSS, but it baffles me. I do not want to resort to javascript to fix this, as I consider this a fundamental problem.

Is there any way to find out where the css rule comes from?

Answer 1

You can use the web inspector in Chrome.

Right-click on the drop-down item and select the check item.

There should be two sections in the web inspector window: left is the tree of html nodes, and on the right are the styles and properties of the selected node. The failed item must already be selected.

Then you need to expand the tab "Calculated style" and look for the style of violation.

Upon detection, you will see a small triangle to the left of the style definition - it is available for click. When clicked, it should expand the list of selectors that affect this style for this element. You will see a url for css for each of this. Bingo.

Answer 2

As pointed out by austin and Waterlink, the Calculated Styles tab (or Calculated in FF) can display the current styles and their beginning.

However, the Styles tab is also very useful. By right-clicking on the “validate” item, the Styles tab will display a complete list of all active styles and overwritten styles associated with the item being checked. (Shows them how they were written in CSS. Not what is actually displayed) This way you can determine which styles were rewritten in which order. The style in your css can be overwritten from an inline style, a user-defined style, a later defined css file, or a higher value css rule or even a non-css attribute, such as width / height attributes directly on the HTML element

Formatting shows the status of the style:

• plain text = active
• strike through = inactive as another style overwrites it
• greyed out = id not applicable. (If you check the style style <p> , and the identifier css p, span , then the identifier span will be grayed out)

Example:

In this image, the color #post a property is inactive. It has been overwritten by the color property in #cashieCatalog .

Answer 3

On the Firebug HTML tab, you'll see a panel on the right with the Style , Computed , Layout and DOM tabs. Choose Computed . This will show you the "current" style applied to the page.

If you expand the node rule, you should see a link to the right showing you which stylesheet it comes from, as well as redefined style rules.