多くのクラスを持つ3つの大きなCSSファイルがあります。これらのクラスの名前は同じですが、異なるファイルにあります。CSSから特定のプロパティを選択する方法は？
例： CSS1：
...
.btn-primary {
background: #000;
}
...
CSS2：
...
.btn-primary {
background: #fff;
}
...
とCSS3：
...
.btn-primary {
background: #4285F4;
}
...
はのは、3つのすべてのCSSが私のHTMLページで呼び出されていることを前提としましょう。 私のウェブページでCSS3の.btn-primaryクラスだけを選択する方法はありますか？はいの場合、どうすればいいですか？
号
スタイルシートをページにロードされ、それは要素と一致するセレクタとルールセットを有している場合、それは、その要素に適用されます。
特定のプロパティに対して競合する情報を提供するルールは、standard cascade orderで互いに上書きされます。
そのままはないが、それは次のように読むように、あなたのスタイルシートを変更することができます：
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
その後、あなたは以下のクラスを使用して、特定のスタイルを得ることができます：で
<a class='btn-primary style2'>Stylesheet 2</a>
短い場合は、さまざまなスタイルを絞り込むための追加の方法を追加する必要があります。
-
別の可能性はそうのようなSCSSするCSSファイルを変換するには、次のようになります。
.style1 {
.btn-primary { ... }
}
あなたがそのようにのような特定のシートからスタイリングを使用することができます。
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
複数の大きなライブラリを一緒に使いたい場合、私はいつも私のスタイルシートを「名前空間を設定」していました。 –
謝罪：私の意見では、以下は間違った解決策です。私はあなたがcssファイルを変更するのではなく、このようなハッピーな方法を見つけなければならない状況を考えることができるので、それを追加したかったのです。
一般に、QuentinとBryantは指摘しているように、cssファイルには「ネームスペース」はありません。したがって、すべてのcssファイルをロードすると、最後に上書きされるファイルのセレクタクラス（名前が競合するクラス） ）、それらの間で選択することはできません。
（いくつかの奇妙な理由で）場合は、クロームのユーザーを気にしない - あなたはおそらくdocument.styleSheets[i]オブジェクトのcssRulesまたはrulesプロパティを使用することができます - 各ロードされたスタイルシートファイルのために（iは、ファイルの数です）。前述のように、この方法はdoes not work for Chromeです。何らかの理由で、styleSheets[i]のそれぞれについて、cssRulesとrulesがnullです。あなたが必要としてすべてのCSSファイルをロードした後
私のハックソリューション。あなたはそれのためにAJAXを使用することができます - this question and its answers
あなたが持っているテキストにしたいセレクタを検索し、その文字列を抽出します。たとえば、ファイル全体を解析して、関連する部分を取り込むことができます。
この手順を手助けする方法を検索すると、document.styleSheets[i].cssRulesオブジェクトとChromeで動作しないメソッドが見つかりました。
これにはいくつかの理由（パフォーマンス、優雅さ、読みやすさ）からそれを行うには間違った方法のように思える - と、おそらくCSSファイルのデザインプロジェクト（ブライアントの提案を見て）のために適切ではないこと - が、私この回答がここにあるようにしてください。はですが、ハッキーですが、何らかの理由でCSSファイルを変更できない場合はそのまま使用してください。
私はこれの使い方がわかりません。私は3つのファイルを持ち、異なるスタイルと同じスタイルをそれらに格納していることを意味します。
しかし、あなたのCSSを正規化し、縮小化されますいくつかのツールがありますが、例えば、Nano CSS
を見てみましょう。しかし、他の回答は、このページに適用されますどのファイルからどのようなクラスを言うことはできないと言うと上書きされ、最後のスタイルが要素に適用されます。ここで
もどのように上書き作品を見つけるための例です：
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}<a id="test-link" href="javascript:void(0);">Test link</a>見ての通り、私はビッグスリーを持ってbackground色
」に適用ちょうど最後のスタイル多くのクラスを持つCSSファイル。 " - HTMLにはクラスがあります。 CSSはそうではありません。 CSSにはクラスセレクタとルールとルールセットとセレクタの他の種類があります。これは人々が（間違って非常に混乱して）「クラス」と呼ばれるすべてのものです。 – Quentin
「選択」とはどういう意味ですか？ – fstanis