每個樣式規則由選擇器和宣告塊兩部分組成,如果宣告中使用了不正確的屬性或者不正確的值,整個宣告都會被忽略。
選擇器有:id選擇器,類選擇器,屬性選擇器,標籤選擇器,後代選擇器,相鄰兄弟結合符,偽類選擇器,偽元素選擇器,萬用字元。
.偽類和偽元素選擇器可以為文件中不一定存在的結構指定樣式。
偽類可以理解為為元素指定假想類,偽元素可以理解為在文件中插入假想的元素。
偽類選擇器::link,:visited,:focus,:hover,:active
:link和:visited只應用於超連結,它們屬於靜態偽類,即第一次顯示之後一般不會再改變文件樣式。
:focus,:hover,:active屬於動態偽類,它們可以根據使用者行為改變文件外觀,並且可應用於任何元素。
根據樣式規則的優先順序計算方式,為了讓每個偽類選擇器達到預期效果,偽類的順序很重要,通常建議為:link-visited-focus-hover-active
偽元素有:before,after,first-letter,first-line,first-child,root……
所有偽元素都必須放在出現該偽元素的選擇器的最後面。
利用before,after的content屬性可在元素前後插入文字,影象,專案編號。
before,after的content屬性值可以為none或normal,表示不插入內容,其區別為:none只能應用在這兩個選擇器中,normal還可以應用在其他用來插入內容的選擇器中。
利用before,after的content屬性指定影象的url向頁面中插入影象,相比於直接插入img標籤,該方法更節省時間。
在content屬性中使用counter屬性值來針對多個專案追加連續編號。
通過考慮繼承,宣告的特殊性,宣告的**,出現順序來確定乙個員素應用那些樣式的過程叫層疊。
層疊規則:
a.標誌!important的規則的權重高於沒有!important的規則。讀者的重要宣告高於創作者的。預設規則影響最小。
b.按照特殊性對給定元素的所有宣告排序,較高特殊性的元素的權重大於較低特殊性的元素。
(特殊性計算:
id——0,1,0,0
類/屬性/偽類——0,0,1,0
結合符/萬用字元:0,0,0,0
內聯樣式:1,0,0,0
繼承值沒有特殊性
) c.按出現順序,後出現的規則勝出。內嵌樣式權重大於外聯樣式。
CSS踩坑(7)選擇器
學css常看見 選擇器 三個字,但較個真兒卻解釋不了具體含義 選擇器是一種模式,用於選擇需要新增樣式的元素 還是不太理解 我覺得看幾個例子大家就知道了 1 class 具體例子 div.image 描述 選擇 class image 的所有元素 因為html對應的 就是 2 id 具體例子 imag...
css知識總結 選擇器
css選擇器規定了css規則用於那些元素上 選擇器示例 示例說明 通用元素選擇器,匹配所有的元素。class info 類選擇器,匹配所有class屬性值中包含info的元素。element p標籤選擇器。匹配p標籤。id info id選擇器,匹配id屬性為 info的元素。選擇器示例 示例說明 ...
CSS一 選擇器
一 規範 實現結構 html 樣式 css 行為的分離 js 二 css在html中的宣告 如果直接寫css 如果鏈結css檔案 三 選擇器 1 類選擇器 選擇元素.類名 html檔案 this paragraph will also be center aligned.css檔案 h1.cente...