1

我有许多为第三方插件导入的 SCSS 文件，这可能是问题所在，但基本上如果我直接style在 div 中使用属性（内联样式），则预期的行为会起作用。但是，如果我创建一个类甚至是一个 ID，它就不适用于它。

任何有关调查内容或立即更正的建议将不胜感激。

<div class="box" style="margin-left: 50px; margin-right: 50px">
  <div class="padded" >
    <%= @step.description %>
  </div>
</div>

但是，当我将上面的代码更改为下面，并将类添加到 custom.css.scss - 它不起作用：

<div class="box description">
  <div class="padded" >

   <%= @step.description %>
  </div>
</div>

 .description {

    margin-left: 50px;
    margin-right: 50px
}
4

3 回答 3

4

It might be that you need to put the styling within the style element.

<style>
.description {
    margin-left: 50px;
    margin-right: 50px
}
</style>

And here's some more things you might need to know about the style element:

The style attribute has a type attribute that you might see some websites include. Valid values for this attribute are MIME types. For instance, <style type="text/css">. The w3c specs require browsers to default the value to text/css, so omitting it should be (and, as far as I know, is) fine.

For now, you should only place style elements in the <head> of the document, which is where the specs require them be at the moment.

However, in the near future we will be able to scope stylesheets. Scoped sheets can be placed inline in the document and have a scoped attribute set to true on the element. Read more introductory material on scoping here at the MDN.

于 2013-08-22T16:48:54.870 回答
3

我怀疑这.description还不够具体，无法覆盖任何指定.box .padded容器边距设置的预先存在的 CSS 规则div。

您可以尝试以下方法：

.box.description {
    margin-left: 50px;
    margin-right: 50px
}

或者如果特异性非常高，请尝试：

<div id="thisbox" class="box description">
  <div class="padded" >
    <%= @step.description %>
  </div>
</div>

并调整CSS如下：

div#thisbox.box.description {
    margin-left: 50px;
    margin-right: 50px
}

（参见演示：http: //jsfiddle.net/audetwebdesign/AvRXT/）

您的样式规则用作内联样式的原因是内联样式的优先级高于外部样式表中的任何 CSS 规则。

附言

我假设您已将 CSS 规则添加到预先存在的 CSS/SCSS 样式表中，或者使用文档部分中的<style>标记将其正确编码为嵌入样式。<head>见jmeas的帖子

于 2013-08-22T16:56:12.773 回答
0

您可以使用!important. 例如，我正在使用材质卡，而card-image类覆盖了我的 CSS，因此我将其设置为重要。

.project_7_bg {height:250px !important;
               object-fit: cover ;  
             background-color :#408C54}
于 2017-04-08T06:55:58.050 回答