Css selector right weight
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div #div02{ /* 1+100=101 */
color: #ff0;
width: 200px;
}
#div01>div{ /*100+1=101*/
height: 300px;
color: #f00;
width: 300px;
background-color: #00f;
}
.div01 .div02{ /*10+10=20 */
font-size: 50px;
}
#div01>#div02{ /*100+100=200*/
font-size: 20px;
background-color: #f00;
color: #fff;
}
div{
width: 500px!important;
height: 500px!important;
color: #f00!important;
background-color: #ff0!important;
}
</ style>
</ head>
<body>
<div class = "div01" ID = "div01">
<div class = "div02" ID = "div02" style = "width: 10px; height: 10px; background-Color : # 000; "> today the weather is good </ div>
</ div>
! <-
selector is entitled to heavy
inline style 1000
the above mentioned id 100
class 10
elements 1
General 0
! BOSS Important as long as there, with regard to this as main
higher the weight, style, part of the conflict on to the high weight of the main, not to say that this selector is not used, but the style of conflict inside
the weight just only as a reference
to calculate the weight
does not require tubes generations and future generations
if the same weight, the principle of proximity. Whichever is later defined
silly things:
->
</ body>
</ HTML>