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

スタイル要素内にスタイルを配置する必要があるかもしれません。

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

さらに、スタイル要素について知っておく必要があることがいくつかあります。

style 属性には、type一部の Web サイトに含まれている可能性のある属性があります。この属性の有効な値は MIME タイプです。たとえば、<style type="text/css">. w3cの仕様では、ブラウザーが値をデフォルトで にするtext/css必要があるため、省略しても問題ありません (私の知る限り)。

今のところ、ドキュメントのスタイル要素のみを配置する<head>必要があります。これは、現時点で仕様が必要とする場所です。

ただし、近い将来、スタイルシートをスコープできるようになります。範囲指定されたシートはドキュメント内にインラインで配置でき、要素scopedに属性を設定できますtrue。スコーピングに関する詳しい紹介資料は、MDN でお読みください。

于 2013-08-22T16:48:54.870 に答える
3

container.descriptionのマージン設定を指定する既存の CSS ルールをオーバーライドするほど具体的ではないと思います。.box .paddeddiv

次のようなものを試すことができます：

.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 ルールよりも優先されるためです。

PS

CSS ルールを既存の CSS/SCSS スタイル シートに追加したか、ドキュメントのセクションの<style>タグを使用して埋め込みスタイルとして正しくコーディングしたと想定しています。jmeas<head>の投稿を参照

于 2013-08-22T16:56:12.773 に答える
0

を使用して、CSS の優先度を高く設定できます!important。たとえば、マテリアル カードを使用していて、card-imageクラスが CSS をオーバーライドしていたので、それを重要として設定しました。

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