html - 属性セレクターを使用して 1 つの入力ブロックに必要なスタイルを適用する方法は?

Question

この問題を解決するには、いくつかのブロックを作成し、そのうちの 1 つを特別なワイドで作成する必要がありますか?

私のHtmlコードがあります

<section id="sec">
  <input type="text" name="myname1" />
  <input type="text" name="myname2" />
  <input type="text" name="myname3" />
</section>

および Css コード

#sec input {
  width: 300px;
  border-radius: 3px;
  border: 1px solid #cdcdcd;
  height: 52px;
  margin: 2px 0 27px 0;
  font-size: 24px;
  font-weight: 100;
  padding: 0 10px;
  box-sizing: border-box;
}
input[name=myname2] {
  width: 150px;
}

JSFiddleを参照してください

Answer 1

解決するのは非常に簡単です。セレクター#sec inputは子孫セレクターであるという理由よりも重要でinput[name=myname2]あり、CSS では、子孫が 1 つの要素のセレクターよりも重要であると指定されています。input[name=myname2]作品を適切に作成するには、に変更するだけ#sec input[name=myname2]です。

次に、#sec input[name=myname2]は子孫であり、より具体的であるため、 を上書きします#sec input。

乾杯