CSS style does not work (the most complete solution summary in history)

When we write pages, we sometimes find that the CSS styles we write do not take effect. There are many reasons for this phenomenon. Here are some common reasons that I hope can help you. You are welcome to add to the comments section.

Browser Cache Issues

If you have checked and rechecked your code and think it is ok, then it may be a browser cache issue. Before troubleshooting, try clearing the browser cache, restarting the browser, or changing the browser. If that doesn't work, perform further troubleshooting. It is possible that you have done nothing wrong, and the problem is just caused by cache or browser. Resetting it may solve the problem.

Use the browser's 'F12' element audit to see which styles are not being applied.

Details

The attribute name is incorrectly written so that it cannot match the HTML, or the attribute value does not conform to the specification;

The HTML tags are not written completely, such as missing "<" or ">";

，；｛｝ Check whether these symbols are accidentally used in Chinese or full-width symbols;

<span> CSS style does not work: For example, to define span to be centered, you must first make span a block-level element, that is, first define span's display:block; attribute, and then add margin:0px auto;

There is no semicolon in the middle of the css style;
Why do CSS styles sometimes use semicolons and sometimes spaces?
When setting the same property, separate them with spaces, such as border:1px solid red; when setting different properties, separate them with semicolons, such as width:300px;height:300px;

Style sheet association issues

If your style is completely ineffective, first confirm whether the style sheet is associated, or whether the associated style location and name are correct;

<link rel="stylesheet" type="text/css" href="mycss.css"/>

Check whether the custom CSS style introduction tag is placed after the bootstrap framework style reference to ensure that it will not be overwritten by the framework style when the page is loaded.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mycss.css"/>

Selector Problem

Descendant selection, etc., involves multiple tags, class names, ids, etc., and the order and names of child selectors are written incorrectly, which may lead to errors;

If you forget to write the class name and id in the html tag, and the selector uses these omitted class names, ids, etc., the style will naturally not take effect.

The descendant selector forgot to add spaces;

Check if there are any extra spaces, for example, whether the selector such as div.box{} is written as div .box{} ;

Encoding format problem

Save all CSS and HTML web page files in UTF-8 format; that is, add <meta charset="UTF-8"> to the head tag
Because the general web page uses the UTF-8 encoding format, and the external CSS file defaults to the ANSI encoding format, there will generally be no problem. However, problems may arise when CSS files contain Chinese comments.

Style cascading issues

• Check if there is a problem with your CSS priority. A high priority will override a low priority, resulting in the inability to see the style.
• If you set the style yourself, the style inherited from the parent will not take effect; CSS style priority order:
• !important > Inline style > ID selector > Class selector > Tag > Wildcard > Inheritance > Browser default properties (when the priority is the same, the latter cascades the previous style);

Check order:

This is the end of this article about CSS styles not working (the most comprehensive summary of solutions in history). For more related content about CSS styles not working, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!