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>