web-dev-qa-db-ja.com

すべての入力タイプを選択するSCSS / CSSセレクター

私はいくつかの入力タイプにこのscss設定があります（フレームワークから）

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
...
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
{
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
}

私はすべてをオーバーライド/リセットしたい、似たようなもの

textarea,
input[type="*"],
{
  @include box-shadow(none);
}

上記が機能しない、また

textarea,
    input,
    {
      @include box-shadow(none);
    }

十分に具体的ではありません。すべての可能なタイプをリストするよりもこれを行う方法はありますか。

ありがとう。

csscss-selectorssass
20
bsr

多くの入力タイプがあります。テキストエリアとtype属性を持つ入力が必要な場合は...

textarea,
input[type] {
    ...
}

一部の入力タイプを除外する場合は、:notセレクター。 JSFIDDLEの例を編集http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

しかし、私が言ったように、あなたが欲しくないタイプよりもあなたが欲しくないタイプがおそらくもっとたくさんあるので、あなたは本当にリストを避けることはできません。

代わりに常にCSSクラスを使用できます。

.box-shadowed
{
  @include box-shadow(none);
}
38
Louis Ricci

これで十分ですか？

input[type="text"] {
    border: 1px red;
}

input[type] {
    border: 1px solid blue; }
}

どちらも同じ特異性を持っているので、最後のものが上書きされます。

JsFiddleを参照してください： http://jsfiddle.net/TheNix/T2BbG/

別の解決策は、最初のセレクターから要素を省略することです。後者はより高い特異性を持ちますが、パフォーマンスの観点から、最初のものはユニバーサルセレクターの使用に似ていることを知っておく必要があります（DOM内のすべての要素を一致させて属性をチェックするため）。

[type="text"] {
    border: 1px red;
}

input[type="text"] {
    border: 1px solid blue; }
}
5
Nix