样式表中的 css 规则但未应用于浏览器

Question

我正在用 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>

除 .content 上的最后一条规则外，所有更改都适用于文档。当我在浏览器(chrome、mozilla 等)中启动文档并检查元素时，我看不到颜色规则，但可以看到创建的其他规则。

Answer 1

如我所见，方框是蓝色的。也许还有更多规则，此处未显示并干扰您的意图。但是，如果您没有在调试器上看到规则，则可能是生产文档中的简单语法错误。不是在这个例子中。

编辑:

您应该“检查元素”并查找 .content 规则。如果你在里面看到类似这样的东西 background-color: #8AB9FF; 那么另一个规则正在被覆盖。试试这个。

background-color: #8AB9FF !important;

例子:

*,
 *: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>