☰

CSSルールを重要度が低いとマークしますか? 質問する

tag-icon • tag-icon css
CSSルールを重要度が低いとマークしますか? 質問する

最初のルールが特に「higher」であっても、後続のルールを上書きしないように、CSS ルールを重要度が低いとマークする方法はありますか? たとえば、CSS ファイルに次の内容があるとします。

#inputDiv input[type="text"]{
    width:125px;
}

#differentInput1{
    width:25px;
}

#differentInput2{
    width:500px;
}

私が目指していたのは、div「inputDiv」の子であるすべてのテキスト入力フィールドの幅が 125 ピクセルになるというアイデアです。ただし、特定の入力フィールドは他の幅になります。問題は、最初の宣言が特定の項目の宣言をオーバーライドすることです。

私は次のことを試しました:

  1. 特定の幅ごとに !important を追加します。動作しますが、多くの人が (正しいと思いますが) !important は避けるべきだと主張しており、特定の幅を持つ各要素に追加する必要があるため、かなり面倒です。
  2. それぞれの特定のセレクターの先頭に #inputDiv を追加します (例: #inputDiv #differentInput1)。これも機能し、!important の使用に関する問題を回避しますが、各要素に対して実行する必要があるため、依然として面倒です。

最初の宣言の項目はそれほど重要ではなく、何も上書きすべきではないと簡単に言う方法はありますか?

ベストアンサー1

これは CSS と相反するものなので、これを行う方法はありません。反対のことを行うのも同様に不正行為です。唯一の選択肢は、セレクタの詳細性に頼ることです。たとえば、ID の代わりに!importantクラスを使用することで、それほど面倒ではない方法でこれを記述できます。inputDiv

おすすめ記事