1

自分のコントロールのみを対象とする css リセットを作成しようとしています。したがって、HTML は次のようになります。

<body>
  <img class="outterImg" src="sadkitty.gif" />
  <div id="container" class="container">
    <img class="innerImg" src="sadkitty.gif" />
    <div class="subContainer">
      <img class="innerImg" src="sadkitty.gif" />
    </div>
  </div>
  <img class="outterImg" src="sadkitty.gif" />
</body>

CSSは私が問題を抱えているものですが、現在これに取り組んでいます:

img 
{
  // Bad style declarations for the entire page
  border: solid 3px red;  
  width: 50px;
}

.container img, .container div, .container etc.
{
  // Style reset for specific elements within my control "container"
  border: solid 3px blue;
  width: 100px;
}

.innerImg img
{
  // The target style for the specific class/element within the control
  border: solid 3px green;
  width: 200px;
}

問題は、「.innerImg img」が「.container img」を上書きしないことです。では、「コンテナ」要素内のすべての要素のスタイルをリセットし、その要素内のクラスにスタイルを配置するための最良の方法は何でしょうか?

4

2 に答える 2

3

セレクター は、クラスinnerImgを持つ要素内.innerImg img のimg要素を参照します。あなたの文書にはそのようなものは何もありません。

おそらくそこに欲しいものがありimg.innerImgます。

それを超えて、どのルールに従うかを決定するセレクターの特異性についての短い計算があります。（そのリンクには、どのドキュメントでも私の新しいお気に入りの修飾子が含まれています：「大きなベースを持つ記数法で」）

于 2008-12-02T17:33:27.650 に答える
0

これはあなたが望んでいたものに近い結果になると思います。 

img  
{  
  border: solid 3px red;  
  width: 50px;  
}  
.container .innerImg, .container div  
{  
  border: solid 3px blue;  
  width: 100px;  
}  
.container .subContainer  
{  
  border: none;  
}  
.subContainer .innerImg  
{  
  border: solid 3px green;  
  width: 200px;  
}
于 2008-12-02T17:28:50.280 に答える