3

私はこの単純なCSSを持っています：

.cont div {

  margin:10px;
  border:1px solid;
}

.mark {   /* This get ignored? */

 margin:30px;
}

このマークアップで：

<div class="cont">
  <div>a</div>
  <div class="mark">b</div>
</div>

div.markが持っていることを除いて、margin:30px;少なくともChromeでは、一般的なルール.cont divの方が優先度が高いように見えるため、これは当てはまりません。

私が使いたくないと考えてください!importantこれを解決する他の方法はありますか？

http://jsfiddle.net/xNVRm/

4

5 に答える 5

3

タグ名を追加して、セレクターをより具体的にします。

div.mark {
    margin:30px;
}

デモ： http： //jsfiddle.net/xNVRm/1/

.cont .markタグ名の使用を避けたい場合にも使用できます。

于 2013-01-15T20:43:54.743 に答える
3

使用を避けるためにimportant、cssセレクターをより具体的にする必要があります。を使用できます.cont div.mark。div.markよりも具体的です。

于 2013-01-15T20:44:18.970 に答える
2

「.contdiv」宣言は、実際にはより具体的であるため、「。mark」宣言をオーバーライドします。CSSは、一種のポイントシステムを使用して、どのルールが適用されるかを判断します。あなたの場合、「。cont div」はクラスとその中の要素の両方を指定しますが、「。mark」はクラスのみを指定します。

準拠しているすべてのブラウザで使用する必要のある正確なルールについては、次のリンクを参照してください：http ://www.w3.org/TR/CSS21/cascade.html#specificity

あなたの場合、2番目の宣言で「.cont.mark」を使用してこれを修正できます。

于 2013-01-15T20:51:36.957 に答える
1

これをもう一度見てみると、あなたが何をしようとしているのか理解できていなかったようです。私は今見ていると思います。

あなたが言っているのは-クラス.contを持つものの中のすべてのdivには10pxのマージンがあります。.markよりも具体的です。.markは30pxですが、.cont内にあるdivなので、10pxです。それは右から左に読みます-それはそれについて考えそして特異性をチェックする良い方法です。

私はもっ​​とオブジェクト指向のアプローチで物事を考えるようになりました。このアプローチについてどう思いますか？


HTML

<div class="container section01">
  <div class="block a">a</div>
  <div class="block b">b</div>
</div>


CSS

.container {
    width: 100%;
    float: left;
    border: 1px solid red;
}

.container .block {
    /* you can style these site wide */
}

.section01 .block {
    border:1px solid black;
    padding:10px;
    margin-bottom: 1em;
}

.section01 .block:last-of-type {
    margin-bottom: 0;
}

.section01 .a {
    background-color: red;
}

.section01 .b {
    background-color: lightblue;
}

SASSはこれをはるかに簡単にします。

この例のjsFiddle

この大規模なCODEPEN

于 2013-01-15T21:03:03.993 に答える
1

特異性は、CSSルールにペッキング順序を与える方法の鍵です。HTMLDogのこの記事を見てみてください。

http://www.htmldog.com/guides/cssadvanced/specificity/

div.mark代わりに使用できます。つまり、マークのクラスを持つすべてのdivがこれを実行します。

于 2013-01-15T20:48:42.967 に答える