css中的優先級講的有
1.選擇器的優先級。
2.樣式引入的優先級。
今天要研究的是樣式引入的優先級。網上又很多答案都是如下的,但是真的是這樣的嗎,讓我們來探一探究竟是如何。
四種樣式的優先級別是:行內樣式最高、
?優先級? 內嵌樣式>鏈接樣式>導入樣式?
在這四種的優先中,行內樣式最高(內嵌樣式),大家都是認可的。但剩下的3中就會是我們想的那樣嗎?
測試代碼如下。很簡單,先測試內聯樣式 。一段文本,給設置個color:red;紅色。
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> p{color:red;} </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p> </body> </html>
瀏覽器顯示如下。沒什么問題。
在接着來看看,用link的方式引入一個外部樣式。
引入方式如下。
<link rel="stylesheet" href="Noname1.css"> <style> p{ color:red;} </style>
外部樣式看下列代碼:
p{
color:blue;
}
瀏覽器顯示如下:為什么什么顯示的不是藍色?
顯示還是紅色,難道就是 內聯樣式>連接樣式?接下來調換了調用的下位置。代碼如下。
<style> p{ color:red;} </style> <link rel="stylesheet" href="Noname1.css">
瀏覽器顯示如下。
這樣瀏覽器顯示的卻是藍色,這時候我們就能看出個大概了。
優先就是個順序解析問題,誰的引入樣式在前面,后面的樣式就會被覆蓋前面的樣式。也就是說,哪個樣式離標簽越近,哪個樣式的優先就越高。
然后接下要解決的就是@import的問題了。
解釋是這樣:
@import既可以為頁面引入外部樣式表,也可以在一個樣式表中引入另一個樣式表。
例如:
1.@import url("style.css");一個樣式表中引入另一個樣式表。
2.<style type="text/css">
@import "mytest/div+css/mytest.css";
</style>
也就是用style,或者是使用外部樣式文件再去引入多個樣式文件。
第一種中,直接在style標簽內容中使用。@import。
另開一個css樣式文件,代碼如下:
p{
color:yellow;
}
html代碼如下:
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> @import "Noname2.css"; </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p> </body> </html>
瀏覽器顯示沒有問題:
接着使用在使用link標簽去測試優先級。
先放在前面。引入代碼如下:
<link rel="stylesheet" href="Noname1.css"> <style> @import "Noname2.css"; </style>
瀏覽器顯示看到的是還是上面講到,誰越靠近p標簽,就會采用誰的樣式。有個詞叫上面來着。近水樓台先得月。。。
在看看放在后面會如何。
<style> @import "Noname2.css"; </style> <link rel="stylesheet" href="Noname1.css">
瀏覽器顯示如下。
沒有什么問題。還是一樣,近水樓台先得月。。
四種樣式的優先級別是:
行內樣式最高、
內嵌樣式 與 鏈接樣式(哪個更靠近標簽,哪個樣式的優先級就越高)
導入樣式?
@import的優先級問題就請等下篇。