css樣式引入優先級?


 

 

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的優先級問題就請等下篇。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM