如何阻止div继承父css样式

I have two .SCSS stylesheets contributing to one website. This is so that i can have a base, and a home stylesheet.

我有两个.SCSS样式表贡献给一个网站。这样我就可以拥有一个基础和一个家庭样式表。

In the base style sheet, div has a float of left, however in the What We Do section i would like there to be no float. i cant seem to fix the issue. Any advice would be greatly appreciated!

在基本样式表中,div有一个左边的浮点数,但是在What We Do部分我想要没有浮动。我似乎无法解决这个问题。任何建议将不胜感激!

Here is the JSFiddle - https://jsfiddle.net/hbyeyv6y/

这是JSFiddle - https://jsfiddle.net/hbyeyv6y/

Here is the Base .scss -

这是Base .scss -

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

Here is the What We Do .scss -

这是我们做什么.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; }

2 个解决方案

#1

As said, you could do float: none !important; and initial !important; for other rules. But if you want to write good code, asigning float to body, html and so on doesn't look like a good idea. Float breaks the usual behaviour of the elements and it can lead you to unexpected results. You could add clases like:

如上所述,你可以做浮动:没有!重要;最初的!重要的;其他规则。但是如果你想编写好的代码,将float赋予body,html等等看起来并不是一个好主意。 Float打破了元素的常见行为,可能会导致意外结果。你可以添加如下的clases:

.f-left{
   float:left;
}

only to the elements you want to float.

仅限于您想要浮动的元素。

#2

.whatwedo is not floating - all it's parents and all it's descendants are though. Setting a float on everything is bad; why do you need to float everything?

.whatwedo并没有浮动 - 所有它的父母和所有它的后代都是。在一切上设置浮动是不好的;为什么你需要漂浮一切?

Even so, to answer your question - you can unset the float for all .whatwedo's descendants with the wildcard selector ...

即便如此,回答你的问题 - 你可以通过通配符选择器取消所有.whatwedo的后代的浮动...

.whatwedo * {float: none;}

#1

.f-left{
   float:left;
}