如何阻止div繼承父css風格

我有兩個.SCSS樣式表對一個網站有貢獻。這是我可以有一個基地，和一個家庭樣式表。如何阻止div繼承父css風格

在基本樣式表中，div有一個左邊的浮點數，但是在我們做什麼部分中，我希望沒有浮點數。我似乎無法解決這個問題。任何建議將不勝感激！

這裏是的jsfiddle - https://jsfiddle.net/hbyeyv6y/

這是基礎.scss -

body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }

這裏是我們做什麼.scss -

div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; } 
    div.whatwedo .inner { float: none; } 
    div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; } 
    div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; } 
    div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; } 
    div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; } 
    div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; } 
    div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; } 
    div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; } 
    div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }

來源

2015-05-12 Tom Walsh

你的'div.whatwedo .inner'覆蓋'float'。這是正確的，這是什麼問題？ – panther

謝謝Panther，但是當我這樣做時，我的背景變成半白色，並且內容仍然不居中。 –

http://i61.tinypic.com/2ajx83b.jpg –

至於說，你可以這樣做其他規則爲float: none !important;和initial !important;。但是，如果你想編寫好的代碼，將float賦給body，html等等看起來不是一個好主意。浮動打破了元素的通常行爲，並可能導致您意想不到的結果。你可以添加類如：

.f-left{ 
    float:left; 
}

只對你想浮動的元素。

來源

2015-05-12 08:00:44 Vandervals

.whatwedo不是浮動的 - 所有它的父母和它的後代都是。在一切上設置浮點數是不好的;爲什麼你需要浮動一切？

即使如此，回答你的問題 - 你可以不設置浮動所有.whatwedo的使用通配符選擇後代......

.whatwedo * {float: none;}

來源

2015-05-12 14:30:05 Jayx

如何阻止div繼承父css風格

回答

相關問題