これを達成するためのやや速い方法があるのかどうか不思議です。これをCSSで実現するための簡略な方法はありますか？
言ってやる例えば、私は、以下のCSSを持っている：
#main_login input[type=text], #main_login input[type=password] {
}
は、より高速な方法はありますか？時々私は、すなわち、その中にさらに多くの宣言繰り返し#main_login多くのザッツ
#main_login blah, #main_login meh, #main_login getting_long, #main_login super_long {
}
の行を持っているかもしれません。私は、アスタミックスなどを使っている高度なCSSを見たことがありますが、そのようなことはまだ探っていません。私は自分がやっていることをやるより良い方法があると思います。
任意のポインタ？
唯一の方法私の知っているがLESSのようなものを使用することです：あなたのCSSをより簡潔で読みやすいようにする
#main_login {
input[type=text] {
}
input[type=password] {
}
}
以下はすばらしく見える！これに感謝します。 – willdanceforfun
あなたは十分だろう
.wrapper {
}
のラッパー・クラスまたはID
<div class="wrapper">
<div id="main_login">
...
</div>
</div>
そう定義するCSSを持つことができます。あるいは、CSSの定義は
#main_login {
}
SASSのような別の技術を使用しない限り、実際にはありません。
#main_login * { /* property list */ }
<blah>何もあれば、
<meh>、
<getting_long>と
<super_long>要素が
#main_loginの内側に表示され、あなたは何かなどを使用することができます...
-
アスタリスク*は、そのタグの無関係な、任意の要素を標的とするために使用されます
代わりに、あなたのHTMLを修正して、それらのすべての要素がクラス属性を共有し、そのクラスを単にターゲットにすることができます。しかし、それ以外のときにCSSを使うようにHTMLを変更しています。
私は自分の情報源を挙げて、SASSを使ったことは一度もなかったが、[2010年4月の@Jeff Atwoodのブログ]（http://www.codinghorror.com/blog/2010/04/whats） -wrong-with-css.html） –
一つの素晴らしい方法は、SCSS/SASS使用することです - http://sass-lang.com/を。 SCSSはCSSのスーパーセットで、変数の定義、ミックスインの作成、定義のネストが可能です。最終的なCSSを生成するためにプリプロセッサを使用する必要がありますが、利用可能な多くのWebフレームワーク用のプラグインがあります。
上記のように書き換えることができます：あなただけのすべての要素を選択しない理由があるので、あなたが'LL、
#main_login *
{
....
}
しかし：あなたはアスタリスクを使用して試みることができる
#main_login {
input[type=text], input[type=password] {
...
}
}
非常に涼しい！ネスティングのアイデアが大好きです。おかげで – willdanceforfun
サスは驚くほどに見える – willdanceforfun
私はそれが大好きです。 SCSSを使用しているので、私のスタイルシートははるかに読みやすく保守的です。 – tilleryj
特定の要素を除外するために、CSS3の:not()セレクターを使用する必要があります。
#main_login *:not(.foo, .bar,, div.exclude_me)
{
....
}
あなたはBETTを持っているかもしれませんちょうどあなたがCSS内の複数のクラスを使用することができるので、新しいクラスを作成し、それらの要素に適用することにより、ER運：
<div class="underlined big orange foobar">Foobar</div>
私は基本的にスタイルを記述するために、英語で書くことができるように私は、複雑なスタイルシートで時々これを行いますその要素に関する。
+1を使用するための+1：いいえ...いいアイデア！しかし、どのようにブラウザをサポートしていますか？ –
それはIEのバージョン（IE9を除く）はサポートしていないようですが、ほぼすべての他のブラウザで動作します。 IEに多くのCSS3セレクタを追加するライブラリがあります：http://selectivizr.com/。 – Blender
それは素晴らしいです。私はあなたが除外を使うことができるとは考えていませんでした。 – willdanceforfun
すべてのサブ要素に一致するかどうか、また、使用するケースに一致するCSSセレクタタイプがあるかどうかによって異なります。 *は、すべての要素を一致させるために使用することができます
、しかしそれはスコープすることができます。
#main_login * { }
これは#main_loginの下にあるすべての要素にマッチします。または、特定の要素タイプにスコープできます。
#main_login div { }
#main_loginの下のすべてのdivに一致します。
ここは、セレクタのCSS2リファレンスです：
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
CSS3は、多くの新しいセレクタを追加しますが、古いブラウザでサポートされていません。
優秀な質問を、私はしたいと思いますこれも知っている。 –
いいえ、単純なCSSにコンパイル/生成する別の構文を使用しないでください。 –
私はcedを生成するためにphpを使用しています。変数は特に良いです。 – Sam