CSS 基礎学習 11: Selectors_html/css_WEB-ITnose の優先順位
在CSS基础学习的篇章中，从第四篇博客开始说选择器，到昨天基本已经说完了。今天我们总结一下，选择器作
用：告知浏览器需要设置哪个dom元素的样式。最后来说说选择器一个重要的问题，选择器的优先级。判断优先级的
方法就是尝试！！！
一简单选择器的优先级
简单的选择器包括我们在第四篇，第五篇，第六篇博客的元素选择器(标签选择器)，类选择器和id选择器。
我们来试验：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器优先级</title><style type="text/css">/*标签选择器的渲染红色*/div{ background-color:#FF0000;width:900px;height:400px; }/*类选择器的渲染蓝色*/.test{ background-color:#0000FF; width:900px; height:300px; } /*id选择器的渲染紫色*/#test{ background-color:#FF00FF;width:900px;height:200px; }</style></head><body><div id="test" class="test"></div></body></html>注释掉id选择器后的结果为：类选择器的优先级居其次。
因此这三个简单选择器的优先级顺序为：HTML标签属性>id选择器>类选择器>元素选择器
二同类型选择器的优先级
同类型：指的是相同类型的选择器，理论上优先级是一样的。比如：div和p。.btn和.button。#header和
#footer，它们的优先级是相同的。但是当同类型的选择器作用到相同的HTML标签上的时候优先级就不一样了。
我们继续试验：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器优先级</title><style type="text/css">/*test类选择器的渲染浅绿色*/.test{ background-color:#00FF00;width:900px;height:200px; } /*test1类选择器的渲染浅蓝色*/.test1{ background-color:#00FFFF;width:900px;height:200px; }</style></head><body><div class="test test1"></div></body></html>我们尝试的结果为：CSS规则写在最后面的生效！！
如果这还不能信服我们再来尝试
有什么不一样的效果？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器优先级</title><style type="text/css">/*test类选择器的渲染浅绿色*/.test{ background-color:#00FF00;width:900px;height:200px; } /*test1类选择器的渲染浅蓝色*/.test1{ background-color:#00FFFF;width:900px;height:200px; }</style></head><body><div class="test test1"></div><hr/><div class="test1 test"></div></body></html>
最终我们得出的结论依然是：同类型的选择器，CSS规则写在最后面的生效！
三选择器的优先级
CSS选择器组合出很多复杂的选择器规则，那么我们就不能像简单的选择器那样一个一个尝试。下面我们介绍一
个很实用的判断优先级的方法。
判断优先级：我们约定 id选择器的权重为100，类选择器权重为10，标签选择器权重为1。一个复杂的选择器的权
重等于所有选择器的权重之和。一般，选择器越特殊，优先级(权重)越高。
我们先来看两个复杂的选择器规则：
第一个选择器的权重为：1+10+10+1=22
div.test .item span{
background-color:#00FF00;
}
第二个选择器的权重为：100+1+1=102
#test div span{
background-color:#FF0000;
}
从我们约定的规则来看，显然是第二个生效！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器优先级</title><style type="text/css">/*第一个选择器渲染的是绿色*/div.test .item span{background-color:#00FF00;}/*第一个选择器渲染的是红色*/#test div span{background-color:#FF0000;} </style></head><body><div id="test" class="test"> <div class="item"> <span>12345</span> </div></div></body></html>那么我们可能会有一个疑问：同样的权重，那个选择器起作用呢？从一系列的理论和试验我们可以得出这与同类
型选择器的优先级问题相似，我们还是能轻易的得出结论：同样的权重要选择顺序最后的生效。
四!important
样式最高优先级：无视优先级，在样式的一条声明的最后分号前加上，使该样式起作用。
我们还是来尝试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS选择器优先级</title><style type="text/css">/*元素选择器渲染的是红色*/div{color:#0000FF;}/*类选择器渲染的是蓝色*/.test{color:#FF0000;}</style></head><body><div class="test">攻城课堂</div></body></html>/*元素选择器渲染的是红色*/div{color:#0000FF!important;} 关于选择器的优先级我也就了解了这些，CSS选择器就告一段落了！！
版权声明：本文为博主原创文章，未经博主允许不得转载。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1677
14
1431
52
1334
25
1280
29
1257
24
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML対CSSおよびJavaScript：Webテクノロジーの比較
Apr 23, 2025 am 12:05 AM
HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。
HTMLを超えて：Web開発のための重要なテクノロジー
Apr 26, 2025 am 12:04 AM
強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。
＆lt; strong＆gt;＆lt; b＆gt;の違いは何ですかタグと＆lt; em＆gt;＆lt; i＆gt;タグ？
Apr 28, 2025 pm 05:42 PM
この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。
マークアップ言語としてのHTML：その機能と目的
Apr 22, 2025 am 12:02 AM
HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。
