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，ie）和检查元素时，我看不到颜色规则，但可以看到创建的其他规则。

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>

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

1 个答案: