！重要なウェイトを使用したCSSセレクタの優先順位
.classセレクタは、タグセレクタよりも高いです。#idより高いセレクター.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セレクタの.class
- レッツ・移動
.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>-
結果の図
！重要なウェイトを使用
- 今、私たちはタグセレクタ最低の優先順位を知って、私はタグセレクタの追加
!important属性も、優先順位の高いそれを？ - ！次の形式を使用して重要重量：
color: red !important; /*红色*/-
注：
属性：值 !important属性値は、スペースで区切ることができます。 - 私たちは入力してみましょう
!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>-
結果の図
概要
- タグセレクタ、次のような優先度の高い、低から
.classセレクタ、#idセレクタ、!importantプロパティ