私はこれらの表記法をcssで見つけました:
.nav li ul li a [class*="icol-"] { opacity: 0.5; filter: alpha(opacity=50); padding-top: 4px; }
.secNav .chzn-container { width: 100%!important; max-width: 100%; }
記号の*
前の意味は何ですか?シンボル=
使用時のコメントですか?!
私はこれらの表記法をcssで見つけました:
.nav li ul li a [class*="icol-"] { opacity: 0.5; filter: alpha(opacity=50); padding-top: 4px; }
.secNav .chzn-container { width: 100%!important; max-width: 100%; }
記号の*
前の意味は何ですか?シンボル=
使用時のコメントですか?!
element[attribute*="includesthis"]
言い換えると:
<a class="someclassicol-hello">Click me and win a free monkey</a>
と一致します
a[class*="icol-"]
文字列が属性のどこかに表示される場合、それは一致です。
^=
「で始まる」と$=
「で終わる」もあります。詳細については、こちらをご覧ください。
!important
ルールが相互にオーバーライドされない場合は、ルールを強制的に相互にオーバーライドします。
a { color: red !important }
a.blue { color: blue }
<a class="blue">I'm actually red, because the less specific rule is !important</a>
詳しくはこちらをご覧ください。特にこのビット:
いつ
!important
使用する必要がありますか?他のテクニックと同様に、状況に応じて長所と短所があります。では、いつ使用する必要がありますか?これが、潜在的な有効な使用法の主観的な概要です。
一度もない
!important
他のすべての手段が使い果たされた後に絶対に必要でない限り、宣言は使用されるべきではありません。怠惰から!importantを使用して、適切なデバッグを回避したり、プロジェクトを急いで完了させたりすると、それを悪用していることになり、あなた(またはプロジェクトを継承する人)はその結果に苦しむことになります。
!
の一部です!important
; コメントではありません。!important
ルールが常に適用されるように強制します。これは通常、スタイルをオーバーライドしたり、オーバーライドされないようにするために使用されます。
*=
は「含む」という意味です。.nav li ul li a
したがって、この例では、最初の行は「icol-」を含むクラス名を持つ要素のすべての子を探しています。
W3の推奨事項から:
[att*=val]
値にサブストリング「val」のインスタンスが少なくとも1つ含まれているatt属性を持つ要素を表します。「val」が空の文字列の場合、セレクターは何も表しません。
したがって、あなたの場合、icol-
クラス属性(の子.nav li ul li a
)にあるすべての要素と一致します。
*=
属性セレクターです。CSS3仕様を参照してください
!important
つまり、ルールはスタイルの作成者によって重要であると見なされ、オーバーライドしてはなりません。詳細な説明については、CSS2などを参照してください。
周囲の空白~
とのみ一致するものと混同しないでください。
[class*="foo"] /* 'fooA bar' */
foo
(周囲にスペースがある場合とない場合)を含むクラスに一致します
[class~="foo"] /* 'foo bar' */
周囲にスペースfoo
のみを含むクラスに一致します
もあります:
[class^="foo"] // begins with foo ('fooABC')
[class$="foo"] // ends with foo ('ABCfoo')
[class|="foo"] // begins with foo and is separated by a dash ('foo-bar')
詳細はこちら:複雑なセレクター