web-dev-qa-db-ja.com

1つのCSSファイルを別のCSSファイルより優先することはできますか？

私はロンドンでアプリケーションに取り組んでおり、html/cssの人はニューヨークにいます。私たちは両方とも使用できるソース管理の設定がないため、彼は毎日更新をメールで送信しています。それに、そして明らかに、私がより多くの仕事をすればするほど、これに時間がかかります。

私は独自のスタイルシートを作成するというアイデアを持っていましたが、ブラウザに私のシートシートに高い優先度を与え、同じクラス名と属性を持つ彼のスタイルを上書きするように指示する方法はありますか？

これは公開サイトではないため、最新のブラウザのみをサポートします。

cssstylesheet
49
Owen

ヘッダーでどのように設定するかによります。したがって、次のようなものが機能します。

<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" />

最後のものがピックアップされます。

スタイルシートに関する役立つリンクはこちら： http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

参照： CSSの優先順位 上記がうまくいかない場合。

それが明確であることを願っています。

62
Kees Sonnema

個人的には、！importantを使用しないことを強くお勧めします。本当に重要なことを こちら から学んでください。

あなたが知っておくべき：

.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が書いたように、同じことがheadタグに含まれるファイルについても言えます。

11
webrama.pl

CSSルールは順番に適用されます。したがって、あなたがしなければならないのは、CSSを最後に含めることです。

4
David Jashi

Cssルールはシーケンシャルです。htmlファイルで2つのことを行う必要があります

  1. CSSを最後のCSSとして含めます
  2. Cssファイルのすべてのcss属性に！importantを追加しますEg: position : absolute !important;

それはあなたの目的に役立つはずです

2
Varun

どこかで読んだところ、どのCSSファイルが前後に呼び出されるかではなく、実際に最初にロードされるファイルです。たとえば、最初のCSSファイルが十分に長く、基本的な理論により優先度が高いはずのファイルが既に読み込まれている間に読み込みを続ける場合、その後読み込まれるこれらの行の優先度が高くなります。トリッキーですが、注意する必要があります！特異性のあるテクニックは私には合法的なようです。そのため、より具体的な（.someclass divではなく#someid .someclass div）ほど優先順位が高くなります。

2
FoxyStyle

それはこのように動作します：

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

second-style.css：

@import 'third-style.css';

最後にインポートされたスタイルは、すべてのルールが適用されるスタイルです。例えば：

first-style.css：

body{
    size:200%;
    color:red;
}

second-style.css：

@import 'third-style.css';
p{
    color:red;
}

third-style.css：

p{
    color:green;
    size:10%
}

結果のスタイルは次のようになります。

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

注：！importantルールを追加する場合は異なります。例えば：

first-style.css：

body{
    size:200% !important;
    color:red !important;
}

second-style.css：

@import 'third-style.css';
p{
    color:red;
}

third-style.css：

p{
    color:green;
    size:10%
}

結果は次のようになります。

body{
    size:200% !important;
    color:red !important;
}

これがお役に立てば幸いです！

1
Elliot A.

ここでstackoverflowの投稿を見つけました。私はそれがあなたを助けるかもしれないと思った。

2つの大きなCSSファイルをマージする効率的な方法

実際にファイルをマージする場合は、これが役立つと思います。

より具体的な方法でCSSを指定することも役立ちます。

好む：

td.classname{}
table.classname{}
1
Elegant Coder

次のようにCSS優先度ルールを使用します。

  1. HTMLを使用したインラインcssとしての最初のルールは、あらゆるcssをマージします。

  2. キーワードとしての2番目のルールは、値の後にcss宣言で！importantを使用します。

  3. Htmlヘッダースタイルシートリンクの優先順位としての3番目のルール（カスタムcssスタイルシートの後のメインcssスタイルシート）。

基本的に、ユーザーは3番目のルールを使用する場合、bootstrap 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">
0
Md Rashadul Islam