.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
padding-bottom: 5px
}
がこれよりも高い優先順位を有する。
.cssform.wide input[type="text"]{
width: 500px;
padding-bottom: 5px
}
最初のものは1クラスと1つの要素を有する：（0,0,1,1） もう一つは2を有していますクラスと1要素：（0,0,2,1）
しかし、最初のスタイルが適用されます（IE8とFF）。どうしてこんなことに？
CSSの指定規則に従って、2番目のルールを適用する必要があります。 ただし、両方のルールに一致する場合のみ。潜在的に入力要素には ルールを適用します（あなたの場合は自然）。しかし、CSSルールはwideの要素の子孫入力要素 を探します。だから、代わりに.cssform .wide input使用.cssform input.wide：
.cssform input.wide[type="text"] {
width: 500px;
padding-bottom: 5px
}
.cssform input[type="text"] {
width: 180px;
padding-bottom: 5px
}
そしてHTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form class="cssform">
<input type="text" />
<input class="wide" type="text" />
</form>
</body>
一般的な選択ルールは次のとおりです。 1.ルールではなく、他のソースからの<style>は、より多くので 2.ルールを好んでセレクタ内のID属性が好ましい 3.セレクタの他の属性および疑似クラスの数が多い方の規則 4.セレクタ内の要素名および疑似要素の数が多い方の規則
十分に明確ではない、あなたは常に、このような suzyit
ありがとう！これはうまくいった。 –
あなたのHTMLには誤りがあります。あなたは完全に提供 CSSは、次のHTMLコードと一致します。
<form class='cssform wide'>
<input type="text" />
</form>
そして.cssform.wide input[type="text"]セレクタが優先されます。 jsfiddle
などのツールを使用して、ルールの特異性を確認することができた場合は、あなたのHTML要素は、実際に両方のクラスを持っていますか？また、特異性は四重項ではなく三つ組でカウントされ、属性セレクタはクラスと同じようにカウントされるので、それぞれ（0,2,1）と（0,3,1） - http：//www.w3を参照してください.org/TR /セレクター/＃特異性 – BoltClock
[This JsFiddle]（http://jsfiddle.net/5mPDV/）は正常に動作することを示しています。別の何かが間違っているに違いない。 – kapa
HTMLを見ることができるのですが、 '.cssform'と' .wide 'の間にスペースが必要な場合があります。 – Kyle