首頁 > 開發者 > JavaScript
css引入方式優先順序以及不同選取器的優先順序區別，css選取器
我們都知道css有3種基本設定方式即
1、行內也叫嵌入式 例如：
<div style='background:red'></div>
2、內聯式，在html檔案中用style標籤包裹著的 例如：
<html> <style type='text/css'> div{ background:red; } </style></html>
3、連結式，在html檔案中用link標籤引用進來著的 例如：
<html> <link rel='stylesheet' type='text/css' href='style.css'/></html>
註：還有一種@import寫法不太常用相容性也有問題忽略了
當我們同時使用這三種方式來對同一目標元素設定樣式的時候優先順序是 行內>內聯>連結
一般情況下在同一種方式（檔案）按照誰在後面誰的優先順序最高，這個很多人都知道，
但是也有很多人忽視了不同的選取器也有優先順序。
首先我們先來回憶下css的選取器類型吧
#id名 { 屬性名稱:屬性值; }
.class名 { 屬性名稱:屬性值; }
標籤名 { 屬性名稱:屬性值; }
這是3中基本選取器還有他們相互結合的複合選取器
我們寫一個css樣式檔案引入到css.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=utf-8" /><title>css優先順序討論</title></head><link rel="stylesheet" type="text/css" href="base.css"/><body> <div id='red' class='blue' >顏色</div></body></html>
base.css檔案如下
@charset "utf-8";/* CSS Document */#red{ color:red;}.blue{ color:blue;}div{ color:black;}
這3個樣式設定都是針對一個元素且都在連結檔案中應該按照順序後面覆蓋前面的才對但是瀏覽器啟動並執行結果卻是
這就說明id選取器優先順序最高 ，具體的選取器權重請看
通過這個圖片我們就可以計算哪種設定的優先順序高了，同時我們也會意識到有可能連結的優先順序會大於嵌入式哦！在實際中也會經常越到這種因問題導致的出錯，現在來看一個實際的例子
在這個頁面中針對按鈕 ”下一步“的color屬性有3次設定，而且都是在base.css檔案中，後面的顏色值沒有覆蓋前面的設定變成白色，因為第一個圈裡的使用的是類+標籤 權重為11 第二個使用類 權重是10 最後一個是標籤權重為1 自然是第一個設定的生效 解決方案很簡單在第二個選取器上改一下結果如下
權重值相等後面覆蓋了前面，就是這些了，不足錯誤之請指出。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
