What to do if css changes don't take effect

Solutions for changing css that does not take effect: 1. Clear the browser cache or restart the browser; 2. Check whether the attribute name and attribute value comply with the specifications and modify them; 3. Check whether the style sheet is associated, or the associated Check whether the style position and name are correct and modify them; 4. Check whether the selector is correct and modify them; 5. Check whether there are problems with the CSS priority and modify them.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

What should I do if the css change does not take effect?

CSS styles not working? Summary of the most complete solutions in history

When we write pages, we sometimes find that the css styles we write cannot take effect. There are many reasons for this phenomenon. Here are some common reasons. I hope it can help. To you, welcome to add in the comment area.

Browser cache problem

• If you check repeatedly and think there is no problem with the code, then it may be a browser cache problem. Before troubleshooting, try clearing the browser cache, restarting the browser or changing the browser and other methods. If it doesn't work, proceed with further troubleshooting. It's possible that you didn't do anything wrong, but it was caused by a cache or browser problem. Resetting may solve the problem.
• Review the ‘F12’ element of the browser to see which styles are not applied.
  

Detailed issues

• The wrong attribute name cannot be matched with html, or the attribute value does not match Specification;

• html tags are not completely written, missing "", etc.;

• ##,; ｛｝Check whether these symbols accidentally use Chinese or full-width symbols;

• Setting the CSS style does not work: for example : To define the span to be centered, you must first display the span as a block-level element. That is to say, you must first define the display:block; attribute of the span, and then add the margin attribute margin to the span: 0px auto;

• There is no semicolon in the middle of the css style;

  Why are semicolons sometimes used to separate css styles and sometimes spaces?
  When setting
  the same attribute , use spaces to separate it, such as border:1px solid red; When setting different attributes , use semicolons to separate them, such as width:300px;height:300px;
  
  

##Style sheet association issues

If your style

does not take effect at all
• , first confirm whether the style sheet is associated, or whether the associated style position and name are correct;
  Check whether the custom CSS style introduction tag is placed in the bootstrap frame style After quoting, make sure it is not overwritten by the frame's styles when the page is loaded.

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

  Copy after login

Selector problem

Descendant selection, etc., involving multiple tags, class names, ids, etc., the order of child selectors , names, etc., may lead to errors; the tags in

• html forget to write the class name, id, etc., and the selector uses these missed class names, id, etc., the style will naturally not take effect.
• Forgot to write spaces in the descendant selector;
• Check if there are any extra spaces, such as:
div.box{}
• Will this type of selector be written properly? div .box{};

Encoding format issue

Save CSS and HTML webpage files as UTF -8 format; that is, add

• in the header tag because generally web pages use UTF-8 encoding format, and external CSS files default to It is ANSI encoding format, and generally there will be no problem. However, problems may occur when the CSS file contains Chinese comments.
  

Style cascading problem

Check if there is a problem with your css priority. The higher priority will overwrite the lower one and cause failure See the style;

• If you set the style yourself, the style inherited from the parent will not take effect;
• css style priority sorting:!important > Inline style>ID selection Selector> Class Selector> Tag> Wildcard> Inheritance> Browser default attribute (when the priority is the same, the later cascades the previous style);

Troubleshooting order:

Recommended learning: "css video tutorial"

##

The above is the detailed content of What to do if css changes don't take effect. For more information, please follow other related articles on the PHP Chinese website!