样式表中的CSS规则，但不适用于浏览器

Question

I'm making a grid in html:

  *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box sizing: border-box; } .mygrid { margin: 0 0 20px 0; } &:after { content: ""; display: table; clear: both; } [class*='col-'] { float: left; padding-right: 20px; } .grid &:last-of-type { padding-right: 0; } .col-1-2 { width: 33.3%; } .col-2-3 { width: 66.6%; } .content { background-color: #8AB9FF; padding: 20px; } 

 <div class="mygrid"> <div class="col-1-2"> <div class="content"> <p>Text text text</p> </div> </div> <div class="col-2-3"> <div class="content"> <p>Text text text</p> </div> </div> </div> 

All changes apply on document except last rule on .content . When I fire up document in browsers (chrome, mozilla, ie) and inspect element I can't see the color rule, but can see the other rules created.

Answer 1

As can i see, the boxes are blue. Maybe there are more rules, that no shown here and interfere with your intent. But if you don't see the rule on the debugger, could be a simple syntax error in the production document. Not in this example.

EDIT:

You should "inspect element" and lookup .content rule. If inside you see something like this background-color: #8AB9FF; then another rule is overriding. Try this.

background-color: #8AB9FF !important;

Example:

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mygrid { margin: 0 0 20px 0; } &:after { content: ""; display: table; clear: both; } [class*='col-'] { float: left; padding-right: 20px; } .grid &:last-of-type { padding-right: 0; } .col-1-2 { width: 33.3%; } .col-2-3 { width: 66.6%; } .content { background-color: #8AB9FF !important; padding: 20px; } 

 <div class="mygrid"> <div class="col-1-2"> <div class="content"> <p>Text text text</p> </div> </div> <div class="col-2-3"> <div class="content"> <p>Text text text</p> </div> </div> </div>