語法：
首先，id 選擇器前面有乙個 # 號 - 也稱為棋盤號或井號。
請看下面的規則：
這個選擇器的效果將是一樣的。語法：
然後我們使用以下語法向這些歸類的元素應用樣式，即類名前有乙個點號（.），然後結合通配選擇器：
最常見的 css 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。
例如：
h1
h2
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
例子 1
如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：
例子 2
與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：
例子5與例子4不同，我們還可以對屬性值進行子串匹配。
規則如下：
型別描述
[abc^="def"]
選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]
選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]
選擇 abc 屬性值中包含子串 "def" 的所有元素
例如：
.cn"]
以父元素為範圍選擇後代元素。
例如：如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：
em 以父元素為範圍選擇子元素。
例如：如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：
>
strong
例如：如果要設定緊接在 h1 元素後出現的段落字型為紅色，可以這樣寫：
這個選擇器讀作：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。我們知道擇器指向的越準確，它的優先順序就越高。
故，通常如下分配權值（權值越大優先順序越高）。
選擇器型別
權值!important
[1,0,0,0]
id選擇器
[0,1,0,0]
類選擇器
[0,0,1,0]
元素選擇器
[0,0,0,1]
屬性選擇器
[0,0,1,0]
復合選擇器的權值：
例：權值 = [0,1,0,1]
css 優先順序法則：
a 選擇器都有乙個權值，權值越大越優先；
b 當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
c 創作者的規則高於瀏覽者：即網頁編寫者設定的css 樣式的優先權高於瀏覽器所設定的樣式；
d 繼承的css 樣式不如後來指定的css 樣式；
【注：「內聯樣式表的權值」僅小於!important，因為它是一路id組合出來的。】
假設希望 h2 元素和段落都有灰色。為達到這個目的，最容易的做法是使用以下宣告：
後端碼農談前端（HTML篇）第三課 常見屬性
1 核心屬性 屬性描述 id設定元素的唯一 id。class 設定元素的乙個或多個類名 引用樣式表中的類 style 設定元素的行內樣式 css內聯樣式 title 設定有關元素的額外資訊 可在工具提示中顯示 2 語言屬性 屬性描述 lang 設定元素內容的語言 3 鍵盤屬性 屬性描述 access...
後端碼農談前端（CSS篇）第五課 CSS樣式
css 允許應用純色作為背景，也允許使用背景影象建立相當複雜的效果。可以使用 background color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。例如 要把影象放入背景，需要使用 background image 屬性。background image 屬性的預設值是 none，表...
後端碼農談前端（CSS篇）第一課 CSS概述
扮演瀏覽器是head first圖書中很有意義的乙個環節。可作者忘記了告訴我們扮演瀏覽器的台本。我們從這裡開始。上圖是webkit核心渲染html和css的流程圖。從該圖我們可以知道以下幾個關鍵資訊 html的解析過程和css的解析過程是獨立完成的。html被解析成dom樹 css被解析成樣式規則。...