10

私は単純なテンプレートクラスを持っています:

.template{
  display: none;    
}

これにより、jQuery を使用してクローンを作成し、好みに合わせて少し編集できる html でブロックを作成できます。ただし、この同じ要素に割り当てて複製するクラスの 1 つは、次のように設定します。

.Category{
  display:table-row-group;
  //other properties not related to this problem not shown
}

これは、テンプレートの表示プロパティをオーバーライドすることになり、テンプレート クラスにするという目的全体が無効になります。

確かに、クローン作成後にjQueryを介してテンプレートクラスを削除すると同時に、Categoryクラスをいつでも追加できますが、htmlは簡単に編集でき、変更は内部ではなくそこで行うことができるため、理想的ではありませんjQuery コード。

考え？他のプロパティなどをオーバーライドするようにディスプレイに指示できるのではないかと考えていますか？

ありがとうございました！

4

6 に答える 6

23

CSS には、非常に明確に定義された優先順位があります。

2 つのセレクターの優先度が同じ場合 (2 つの単一クラス セレクターのように)、他のすべてが等しい場合、CSS コードで最後に定義されたセレクターが優先されます。

したがって、ここでの簡単な解決策は、テンプレート CSS を移動して CSS コードを下げることです。

何らかの理由でそれができない場合は、テンプレート セレクターをより具体的にすることが最善の方法です。たとえば、すべてのテンプレート要素が div 要素内に含まれていて、それが常に true になることがわかっている場合は、セレクターを に変更できますdiv .template。セレクターよりも具体的になった.Categoryため、優先する必要があります。

最後に、常にオプションがあります!important。使いすぎると問題が発生する傾向があるため、可能な限り使用しないようにしていますが、必要な場合に備えてあります。実際、このようなケースは、!important私が考えることができる最も正当なユースケースです.

于 2013-10-29T14:47:27.440 に答える
1

簡単な解決策として、css ルールをより具体的にすることができます。

body .Category{
  display:table-row-group;
 //other properties not related to this problem not shown
}

このコードがあるとしましょう：

<html>
<head>
  <style>
    div{background-color:#ccc} 
    #content .Category{display:block;}
    .template{display:none;}
    .otherdiv{background-color:red;}
    body .otherdiv{background-color:green;}
</style>
</head>
<body>
  <div id="content">
    <div class="template Category" >inner template div</div>
  </div>
  <div class="template">outer template div</div>
  <div class="otherdiv">outer other div</div>
</body>
</html>

はinner template divブロックとして表示されますが、外側はブロックされません。

CSS ルールがより具体的であるほど、より「自然に重要」になります。私のコードでは、div.otherdivは緑色の backgroupd で表示されますbody .otherdiv。.otherdiv

CSS の特異性に関する記事を参照してください http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

「0 から開始し、スタイル属性に 1000 を追加、ID ごとに 100 を追加、属性、クラス、または疑似クラスごとに 10 を追加、要素名または疑似要素ごとに 1 を追加。」

使用!importantはまったく推奨されておらず、すべてのブラウザでサポートされているわけではありません

于 2013-10-29T14:53:50.650 に答える
1

.Category に !IMPORTANT を追加します。

.Category{
  display:table-row-group;
  //other properties not related to this problem not shown
}
于 2013-10-29T14:43:19.107 に答える
0 
.template.Category {
  display: none;
}

または単に !important を使用します

.template {
  display: none !important;
}
于 2013-10-29T14:43:24.203 に答える