0

次の html フラグメントがあるとします。

<button id="foo" onclick="window.location.href='/foo/';" 
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only btn btn-primary" type="button" name="btn" id="btn" role="button" aria-disabled="false"><span class="ui-button-text">Join Now »</span></button>

chrome と mozilla の両方がこのルールを選択する理由:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{...}

選択してもらいたい場合:

.btn .btn-primary .ui-widget .ui-widget-content .ui-state-default .ui-button .ui-button-text-only button,
.btn-primary {...}

Firebug は両方のルールが適用されていることを示していますが、2 番目のセレクター チェーンを作成していると思う「より選択的」であっても、最初のセレクターが一番上に表示され、2 番目のセレクターのスタイルがリストのさらに下に表示され、すべてオーバーライドされます( firebug UI の取り消し線)

FWIW、IDベースのセレクターを追加すると最初に選択されることを確認しました。IDをあちこちに割り当てる必要はありません。次のように:

#foo,
.btn-primary {...}

上記の2番目のcssセレクターを最初のものよりも具体的にするのを手伝ってくれる人はいますか?

これはすべて、ブートストラップ スタイルを模倣する、最近リリースされた primefaces ブートストラップ テーマで見つかったバグに関係しています。私の場合、実際のブートストラップも使用しており、btn-primary などのスタイルを pf commandButtons などに適用したいと考えています。

これは、primefaces パネル内に commandButton を配置するまで正常に機能します...その時点で、pf テーマのボタン スタイルがブートストラップのものを破壊します。ブートストラップ css にセレクターを追加して、pf のものから特定性を取得できると思っていました...しかし、明らかに、プレイする CSS セレクター Star Wars がもっとあります.... http://www.stuffandnonsense .co.uk/archives/css_specificity_wars.html

4

1 に答える 1

2

重要な手がかりを与えてくれたBoltClockのおかげで解決しました。

ブートストラップ css クラスを pf テーマのクラスよりも選択するために、ブートストラップ button-* クラスに追加するセレクターは次のとおりです。

.btn-primary.ui-button

クラス名とピリオドの間にスペースがないことに注意してください。これは、両方のクラスを持つ要素を選択することを意味します。

したがって、元のブートストラップ css の場所は次のとおりです。

.btn-primary {...}

pf ui-button クラスを含めるために、別のセレクターを追加しただけです。

.btn-primary.ui-button,
.btn-primary {...}

これで、ボタンが PrimeFaces パネル内にあるときに、PrimeFaces のクラス名としてブートストラップ btn-primary、btn-info、btn-success などを正常に使用できるようになりました。

于 2012-10-10T08:25:06.363 に答える