Might be easier to think of it as, the classes that are in BLUE are the classes that inherit the styling. And the inheritance in the STYLE tab is in reverse to the CSS rules.
For instance we developers write top / down
html{ // in BLUE (html)
font-size: 10px;
-webkit-tap-hightlight-color: rgba(0,0,0,0);
}
html{ // in BLUE (html)
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{ // in BLUE (body)
font-family: "Helvetica Neue",Helvetica ,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
*{ // in BLUE (*)
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.h2, h2{ // in BLUE (h2)
font-size: 30px;
}
.h1, .h2, .h3, h1, h2, h3{ // in BLUE (h2)
margin-top: 20px;
margin-bottom: 10px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ // in BLUE (h2)
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
The app will show you the inheritance in reverse which looks like
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{ // in BLUE (h2)
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.h1, .h2, .h3, h1, h2, h3{ // in BLUE (h2)
margin-top: 20px;
margin-bottom: 10px;
}
.h2, h2{ // in BLUE (h2)
font-size: 30px;
}
*{ // in BLUE (*)
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* body{ // in BLUE (body)
font-family: "Helvetica Neue",Helvetica ,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
html{ // in BLUE (html)
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html{ // in BLUE (html)
font-size: 10px;
-webkit-tap-hightlight-color: rgba(0,0,0,0);
}
Does this make sense?
Saj