- if infringement, please contact will delete ----
Inline style sheet (InLine style)> internal style sheet (Internal style sheet)> Waibuyangshibiao (External style sheet)
Exception: if the style sheet placed inside an external style sheet referenced below, the external style> internal style sheet;
1, the right inline style sheet is 1000;
2, a weight of the ID selector 100;
. 3, Class class selectors, right pseudo-class selector value 10;
. 4, the HTML tags selector, pseudo-element a weight of 1;
PS: pseudo-class - six -: link,: visited,: hover,: active,: focus,: first-child
pseudo-element - has 4 -: before,: after,: first-line,: first -letter
Specific code as follows:
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式权值</title> <style> body{ font-size: 20px; font-weight: 900; } h3{ color: yellow; } #redP p{ /*权值100+1=101*/ color: #f00; / * Red * / } #redP p.red EM { / * weight +. 1 + 10 + 100 = 112. 1 * / Color : # 00F ; / * Blue * / } #redP .red EM { / * Right value =. 1 + 10 + 100 111 * / Color : # 0FF ; / * light blue * / } #redP P EM span { / * weight +. 1. 1 + + 100 = 103. 1 * / Color : # FF0 ; / * yellow * / } </ style > < Link the rel="stylesheet" href="style.css"> </head> <body> <h3>例外:外部样式表>内部样式表</h3> <div id="redP"> <p class="red"> <span> <em>emred</em> </span> </p> <p>red</p> </div> </body> </html>