span标签style的优先级_css样式引入优先级?
css中的優先級講的有
1.選擇器的優先級。
2.樣式引入的優先級。
今天要研究的是樣式引入的優先級。網上又很多答案都是如下的,但是真的是這樣的嗎,讓我們來探一探究竟是如何。
四種樣式的優先級別是:行內樣式最高、
?優先級? ?內嵌樣式>鏈接樣式>導入樣式?
在這四種的優先中,行內樣式最高(內嵌樣式),大家都是認可的。但剩下的3中就會是我們想的那樣嗎?
測試代碼如下。很簡單,先測試內聯樣式 。一段文本,給設置個color:red;紅色。
無標題文檔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?
瀏覽器顯示如下。沒什么問題。
在接著來看看,用link的方式引入一個外部樣式。
引入方式如下。
外部樣式看下列代碼:
p{
color:blue;
}
瀏覽器顯示如下:為什么什么顯示的不是藍色?
顯示還是紅色,難道就是 ?內聯樣式>連接樣式?接下來調換了調用的下位置。代碼如下。
瀏覽器顯示如下。
這樣瀏覽器顯示的卻是藍色,這時候我們就能看出個大概了。
優先就是個順序解析問題,誰的引入樣式在前面,后面的樣式就會被覆蓋前面的樣式。也就是說,哪個樣式離標簽越近,哪個樣式的優先就越高。
然后接下要解決的就是@import的問題了。
解釋是這樣:
@import既可以為頁面引入外部樣式表,也可以在一個樣式表中引入另一個樣式表。
例如:
1.@import?url("style.css");一個樣式表中引入另一個樣式表。
2.
@import?"mytest/div+css/mytest.css";
也就是用style,或者是使用外部樣式文件再去引入多個樣式文件。
第一種中,直接在style標簽內容中使用。@import。
另開一個css樣式文件,代碼如下:
p{
color:yellow;
}
html代碼如下:
無標題文檔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?
瀏覽器顯示沒有問題:
接著使用在使用link標簽去測試優先級。
先放在前面。引入代碼如下:
瀏覽器顯示看到的是還是上面講到,誰越靠近p標簽,就會采用誰的樣式。有個詞叫上面來著。近水樓臺先得月。。。
在看看放在后面會如何。
瀏覽器顯示如下。
沒有什么問題。還是一樣,近水樓臺先得月。。
四種樣式的優先級別是:
行內樣式最高、
內嵌樣式 ?與 ?鏈接樣式(哪個更靠近標簽,哪個樣式的優先級就越高)
導入樣式?
@import的優先級問題就請等下篇。
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的span标签style的优先级_css样式引入优先级?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 手机借款哪个最好通过 办理时要选择正规
- 下一篇: 7日年化2.7% 1万元一天利息多少