私はロンドンでアプリケーションの開発をしていますが、html/css担当者はニューヨークにいます。私は常に彼のCSSに小さな変更を加えているので、彼から新しいファイルを受け取るたびに、私が変更したものをすべて適用し直さなければなりません。
そこで、自分で別のスタイルシートを作ることを考えましたが、自分のスタイルシートを優先し、同じクラス名や属性を持つ彼のスタイルを上書きするようにブラウザに伝える方法はありますか?
これは公開サイトではないので、最新のブラウザにしか対応していません。
それは、あなたがヘッダーでどのように設定したかによります。ですから、このようなものが有効です。
<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />
最後の1つがピックアップされます。
そして、スタイルシートについての参考になるリンクがここにあります。 http://www.w3.org/TR/html401/present/styles.html#h-14.3.2
こちらもご覧ください。上記がうまくいかない場合は、Precedence in CSSを参照してください。
ご理解いただけましたでしょうか?
私は個人的に使用することを厳密にお勧めしません。 !重要。 ここから本当に重要なことを学びましょう。
知っておくべきです:
.some-class .some-div a {
color:red;
}
常に重要です(この場合、出現の順序は問題ではありません):
.some-class a {
color:blue;
}
(同じレベルの2つの宣言)がある場合:
.some-class .some-div a {
color:red;
}
.some-class .some-div a {
color:blue;
}
後で宣言が使用されます。 @Kees Sonnemaが書いたように、ヘッドタグに含まれているファイルについても同じことが言えます。
どこかで読んだのは、どのCSSファイルが前後に呼び出されるのかではなく、実際に最初に読み込まれるのかということです。 たとえば、最初のCSSファイルが読み込みを維持するのに十分な長さで、下のファイル(基本理論では優先度が高いはずです)がすでに読み込まれている場合、後で読み込まれるこれらの行の優先度が高くなります。 トリッキーですが、注意する必要があります。! 特異性のあるテクニックは私には合法に思えます。 したがって、より具体的(.someclass divではなく#somed .someclass div)が優先されます。
ここでstackoverflowで投稿を見つけました。 役立つかもしれないと思いました。
https://stackoverflow.com/questions/3572613/an-efficient-way-to-merge-2-large-css-files。
実際にファイルをマージしたい場合は、これが役立つと思います。
CSSをより具体的な方法で指定することも役立ちます。
のような:
td.classname{}
table.classname{}
それはこのように機能します:
<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">
second-style.cs s:
@import 'third-style.css';
インポートされた最後のスタイルは、すべてのルールが固執するものです。 例:
first-style.cs s:
body{
size:200%;
color:red;
}
second-style.cs s:
@import 'third-style.css';
p{
color:red;
}
third-style.cs s:
p{
color:green;
size:10%
}
結果のスタイルは次のとおりです。
body{
size:200%;
color:red;
}
p{
color:green;
size:10%
注:追加した場合。 !重要なルール、それは異なります。 例:
first-style.cs s:
body{
size:200% !important;
color:red !important;
}
second-style.cs s:
@import 'third-style.css';
p{
color:red;
}
third-style.cs s:
p{
color:green;
size:10%
}
結果は次のとおりです。
body{
size:200% !important;
color:red !important;
}
これが役に立てば幸いです。!
私は以下のようにCSS優先ルールを使用します。
1。 最初のルールは、任意のcssをマージするhtmlを使用したインラインcssです。
2。 キーワード使用としての2番目のルール。 !値ごとのcss宣言で重要です。
3。 3番目のルールは、htmlヘッダースタイルシートリンクの優先順です(カスタムcssスタイルシートの後の主なcssスタイルシート)。
基本的にユーザーは3番目のルールを使用したいので、ブートストラップcssをカスタムcssにマージすることもできます。以下の例:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">