CSS style does not work? The history of the most complete solutions Summary

When we write a page, sometimes find themselves writing css styles could not be effective, leading to a number of reasons for this phenomenon, here are some of the common causes of the desire to help you, welcome to add comments section.

Browser cache problem

• If you double-checked think the code is no problem, there may be a browser cache problem. Before the investigation first try clearing your browser cache, restart your browser or another browser and other means, then invalid for further investigation. There may be nothing wrong themselves, because the problem is browser cache or leads, reset it maybe the problem is solved.
• 'F12' element browser audit to see which style is not on the application.
  

Details

• Wrong attribute name makes it impossible to match html, or attribute value does not meet specifications;

• I did not write html tags intact, missing the "<" or ">" and so on;

• ，；｛｝Look at these symbols are not accidentally use the Chinese or full-width symbols;

• <span>Provided CSS style does not work: for example: To define the center span, span must be let into block-level element display, i.e., define the span display:block;attribute, then add the margin properties span givemargin:0px auto;

• there is no middle css styles semicolon;
  Why css styles to sometimes use a semicolon separated by spaces sometimes it?
  To the same property when settings are separated by spaces, such as border: 1px solid red; of different properties are separated by a semicolon set, such as width: 300px; height: 300px;
  
  

Stylesheet associated problems

• If your style is completely not take effect , first make sure the table is not associated with the style, or the style associated with the location, the name is correct;
  <link rel="stylesheet" type="text/css" href="mycss.css"/>
• Take a look at the introduction of a custom CSS style tag is placed after the bootstrap framework style references, make sure that will not be covered by the style of the frame when the page loads.

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

Selector problem

• Offspring progeny selection, involves a number of labels, class name, id etc. order sub-selector, wrong name, etc., may result in an error;
• html tag forget to write in the name of the class, id, and the choice of these leak Used to write the class name, id and other natural style will not take effect.
• Descendant selectors forget to write spaces;
• See if there are extra spaces such as: div.box{}Such choices will not be written div .box{};

Encoding format problem

• The CSS, HTML page files are unified saved as UTF-8 format; that is added to the header tag <meta charset="UTF-8">
  because the general page in the use of encoding format UTF-8, and the external CSS file default is ANSI encoding format, under normal circumstances is there is no problem. However, when the CSS file contains Chinese comments, problems may occur.

Style layered problem

• Look at your css priority whether the problem occurs, high priority will lead to lower overwritten can not see the pattern;
• Itself set style, inherited from the parent style does not come into force;
• ! CSS style prioritizing: important> inline style> ID selector> class selector> tag> wildcard> Inheritance> Browser default property (when the same priority, the stacked style behind the front);

Investigation and order: