ヘッダエフェクト内のブートストラップとCSSライブラリの順序h3タグ

Question

HTML文書で使用されるh3に影響を与えるブートストラップ（オンライン）とCSSライブラリ（オフライン内部）の順序を変更するとします。私はその紛争の詳細を説明しましょう。以下

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/> 
    <link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" /> 

ファイルのシーケンスとは、HTML文書の結果である：今

のがあるmain.cssファイル、H3タグやロゴの順序を変更できます（H1タグなどを持っていますウェル）の色、フォント、サイズ、レイアウトが変更されます。今すぐ下のスクリーンショットを見てとる

<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/> 

：

今、私の主な関心事は、単に問題がbootstrap.jsに存在する場所ということを知っているのですか？ bootsrap.css？またはブラウズにバグがあります。

誰でも原因を理解するのに役立ちますか？

Answer 1

CSS属性の順序と重みが重要です。ファイルの順序を変更すると、以前のファイルから来たスタイルが、後でファイルが取り込まれると上書きされる可能性があります。

これはCSSの性質に過ぎません。注文に加えて、ClassまたはId、!important属性などを選択したかどうかのようなものは、特定の属性の重みに影響します。競合する属性がある場合、より高い重みを持つ属性が適用されます。

希望します。

Answer 2

あなたはCSSの仕組みにほとんど知識がないようです。 CSSはブラウザによって上から下に読み込まれるため、順序が重要です。デフォルトのブートストラップファイルはすでにH3タグのスタイルに対応しています。 H3タグのカスタムスタイルをmain.cssの中に定義することもできます。したがって、main.cssファイルの後にbootstrap cssファイルを置くと、ブラウザはまずH3タグのmain.cssスタイルを最初に適用し、分割された秒のうちに再びブートストラップCSSスタイルを適用します。その結果、最終的にH3タグのブートストラップスタイルが表示されます。これは逆もありえます。これは意図された動作であり、CSSの仕組みです。

また、CSSをレンダリングする際にブラウザで間違いがないようにしてください。

Answer 3

あなたのカスタムCSS（main.css）を使ってHTMLページのスタイルを設定しているようです。あなたのCSSファイルの順序は問題ありません。カスタムcss（main.css）ファイルを最後に置くと、残りのcssファイルが上書きされます。また、カスタム（main.css）の後に他のCSSファイル（この場合はbootstrap.min.css）を置くと、カスタムCSSファイルが上書きされるため、結果が異なる場合があります。 Bootstrap.min.cssには独自のスタイルがあり、これはカスタムCSSとは異なり、この問題を引き起こしています。