ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS セレクターの優先順位と !重要な重みを理解する

CSS セレクターの優先順位と !重要な重みを理解する

青灯夜游転載: 2020-12-31 17:23:384309ブラウズ

#推奨:

css ビデオチュートリアル

CSS におけるセレクターの優先順位と !重要な重み

セレクターはラベルセレクターよりも上位です。
セレクターは、.class セレクターよりも上位です。タグセレクターは、優先度が最も低いセレクターです。
#! important
タグセレクターと .class セレクター

タグセレクターと

.class

セレクターのどちらが優先されるかを実践してみましょう。内容は次のとおりです。

HTML ページの h2 タグの文字色を設定します。 コードブロック

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
        h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
    </style>
</head>
  
<body>
    <h2 class="box">微笑是最初的信仰</h2>
</body>
</html>

結果グラフ

.クラスセレクターとIDセレクター CSS セレクターの優先順位と !重要な重みを理解する

入力しましょう

。 class

セレクターと

id セレクター、どちらが優先されますか? 演習、演習内容は次のとおりです: HTML ページに h2 タグを設定するテキストの色。 コードブロック

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
       h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

結果グラフ

!重要な重みの使用法 CSS セレクターの優先順位と !重要な重みを理解する

これで、タグセレクターの優先順位がわかりました。最も低いレベルなので、タグセレクターに

! important

属性を追加しました。どちらの優先度が高いでしょうか?

!重要な重みの使用形式は次のとおりです: <pre class="brush:php;toolbar:false">color: red !important; /*红色*/</pre>注:
属性: 値 !重要

属性値はスペースで区切ることができます。

! important

属性の使用方法を実践し、

! important 属性がどれほど強力であるかを見てみましょう。 コードブロック

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>!important使用</title>
    <style>
       h2{
           color: red !important; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

結果グラフ

概要 CSS セレクターの優先順位と !重要な重みを理解する

優先順位は低から高まで、たとえば: タグセレクター、

.class

セレクター、

#id セレクター、!重要属性プログラミング関連の知識の詳細については、 プログラミング教育を参照してください。

! ！

以上がCSS セレクターの優先順位と !重要な重みを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html class 选择器

声明：

この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSで正方形を円に変える方法次の記事：CSSで正方形を円に変える方法

続きを見る