優先度の比較を通じて CSS コントロールスタイルを検証する 3 つの方法-CSSチュートリアル-php.cn

優先度の比較を通じて CSS コントロールスタイルを検証する 3 つの方法

不言

リリース： 2018-06-28 09:26:28

オリジナル

1318 人が閲覧しました

この記事では、優先度の比較を通じて CSS コントロールスタイルを検証する 3 つの方法を主に紹介します。必要な友達に参考にしてください。CSS の中国語名はカスケードスタイルシートであることは誰もが知っています。 , CSS にはスタイルを制御する 3 つの導入方法がありますここでは、CSS でスタイルを制御する 3 つの方法を簡単に紹介します

さて、本題に入りましょう。ご存知のとおり、CSS の中国語名はカスケードスタイルシートと呼ばれます。 CSS がスタイルを制御する場合、スタイルを導入するには次の 3 つの方法があります。

1> 外部スタイルシート: *.css ファイルにスタイルルールを直接記述し、タグを使用してスタイルルールを導入します。 *.html ページメソッド

2>内部スタイルシート: ( タグ内にあります)

3>インラインスタイル: (HTML 要素内)

W3School Web サイトによると (直接アクセスするにはここをクリックしてください)、同じ HTML 要素が複数回使用されている場合スタイルが定義されると、次のように優先順位が分けられます。優先順位は小さいものから大きいものの順に並べられており、4 つの優先順位が最も高くなります:

1. ブラウザーのデフォルト設定

2.外部スタイルシート

3. 内部スタイルシート ( タグ内)
4. インラインスタイル (HTML 要素内)

この結論については、誰もが多くの疑問を抱いていると思います。インターネットで公式 Web サイトのコンテンツを直接コピーして、貼り付けて公開することを忘れると、非常に疲れてイライラするので、ここで検証して比較してみましょう。

注: この検証は主に最後の 3 つの優先順位についてのものです。ブラウザのデフォルト設定については、これが最低である必要があることは誰もが知っていると思いますが、ここではあまり多くの例を示しません。

1. 検証環境の説明

ブラウザ: FireFox 22.0

言語: HTML 4.01/CSS

開発ツール: Aptana Studio 3

2. 3 つの方法を使用してタグの要素スタイルを直接定義します

1> 、外部スタイルシートを直接使用して、p タグのスタイルを定義します:

xiaoxuetu.css

344f090cd33942115b38c5c49f0c1e65

显示效果:

从两个结果我们可以知道，当只有标签选择器的时候，后面定义的样式表的优先级就越高。
四、总结
1.当只使用id选择器、class选择器或者标签选择器的时候，不管是使用多少种样式表定义方式，都是内嵌样式的优先级最高，接下来外部样式表和内部样式表的就得看他们的引入顺序了;
2.当只使用id选择器或者class选择器的时候，同一个标签内不管使用了多少个，都是排在前面的优先级更高;
3.当只使用标签选择器的时候，如果定义了多个一样的，你们写在最后面的标签选择器生效，也就是它的优先级最高;
4.当同一个标签中既有id选择器，又有class选择器，同时又有标签选择器的时候，优先级的次序是id选择器 > class选择器 > 标签选择器;
5.当每一种都有的时候，那就根据具体情况具体分析吧，嘿嘿，哈哈……