首頁 > 文章 > web前端 > css樣式表有哪些種類？選擇器優先權是什麼？

css樣式表有哪些種類？選擇器優先權是什麼？

css樣式表有3種：行內樣式表、內部樣式表、外部樣式表。選擇器優先權為：「通用選擇器>元素選擇器>類別選擇器>屬性選擇器>偽類>ID 選擇器>行內樣式」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css樣式表有哪些種類？

依照CSS樣式書寫的位置（或引入的方式），CSS樣式表可以分為以下三大類：

##1、行內樣式表

行內樣式就是把CSS 樣式直接放在程式碼行內的標籤中，一般都是放入標籤的style屬性中，由於行內樣式直接插入標籤中，故是最直接的一種方式，同時也是修改最不方便的樣式。

範例：

<p style="background-color: #999900">行内元素，控制段落-1</p>

2、內部樣式表

內部樣式表包含在c9ccee2e6ea535a969eb3f532ad9fe89 標籤內，一個6c1d9d1c5e7690ed0ad94b24a12b6eb7 標籤就表示一個內部樣式表。

如果一個網頁文件中包含多個 c9ccee2e6ea535a969eb3f532ad9fe89 標籤，就表示該文件包含了多個內部樣式表。

範例：

<style>
div {
color: blue;
font-size: 16px;
}
</style>

3、外部樣式表

如果CSS 樣式被放置在網頁文件外部的文件中，則稱為外部樣式表，一個CSS 樣式表文件就表示一個外部樣式表。

實際上，外部樣式表也就是一個文字文件，擴展名為.css。當把CSS樣式程式碼複製到一個文字檔後，另存為.css文件，則它就是一個外部樣式表。

在HTML頁面中，使用9b3737d50531bee70b4389e7b6fabf02標籤引入文件，具體引入程式碼如下所示：

<link rel="styleheet" href="css文件路径">

多重樣式表的優先順序：

內嵌樣式inline style > 內部樣式表internal style sheet > 外部樣式表External style sheet > 瀏覽器預設樣式

下面是講解選擇器優先權的內容，關於權重解釋的不錯因此摘抄過來，摘自菜鳥教程

優先級是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先級僅由選擇器組成的匹配規則決定的。

優先權就是指派給指定的CSS宣告的一個權重，它由符合的選擇器中的每一種選擇器類型的數值決定。

選擇器優先權是什麼？

下列是一份優先逐級增加的選擇器清單：

!important 規則例外

當!important 規則被應用在一個樣式宣告中,該樣式宣告會覆寫CSS中任何其他的宣告, 無論它處在宣告清單中的哪裡. 儘管如此, !important規則還是與優先級毫無關係.使用!important 不是一個好習慣，因為它改變了你樣式表本來的級聯規則，從而使其難以調試。

一些經驗法則：

權重計算:

解釋：

利用選擇器的權值進行計算比較，em 顯示藍色，範例如下：https://c.runoob.com/codedemo/3048

A 選擇器都有一個權值，權值越大越優先；
B 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
C 創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；
D 繼承的CSS 樣式不如後來指定的CSS 樣式；
E 在同一組屬性設定中標示為「!important」規則的優先順序最大；範例如下：https://c.runoob. com/codedemo/3049
結果：在Firefox 下顯示為藍色；在IE 6 下顯示為紅色；

##這裡引入一張流行的CSS權重關係圖：

（學習影片分享：

css影片教學）

以上是css樣式表有哪些種類？選擇器優先權是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多