CSS 選擇子(選取器)應用寫法

本章節裡會說明 CSS 寫法, 及選擇子之間的關係

使<h1> <h2> <p> 文字顏色都相同

技巧 各選擇子間可以用逗號合併 成一行 :

h1 , h2 , p {color:red; }

萬用元素選取器

用 * 星號代表網頁中所有的元素

* {color:red; }

關聯選擇子(選取器)

  1. 後代選擇子(Descendant Selector) : 其合併子用一空白字元,例如CSS寫法li em { color:red; } , 這只有li 的後代(不管幾代) em受影響變成紅色 ,li 不受影響
  2. 子代選擇子(Child Selector) : 其合併子用一個大於 > 字元表示,例如CSS寫法li> em { color:red; } , 這只有li 後方大於符號緊跟的em 會受影響,改變顏色 ,若是<li> <em> 中間又夾雜其它元素,例如:<li><p><em>..</li>,這樣的<em>就不是子代,也就不受子代寫法的css影響改變文字顏色</p> 而其父選擇子 li也不受此css影響,
  3. 相鄰選擇子(Adjacent Sibling Selector) : 其合併子用一個 + 號字元,例如CSS寫法h1 + p { color:red; } ,這只有緊跟在h1標籤後的第ㄧ個p標籤會受相鄰選擇子的CSS影響而改變顏色ㄝ,而 h1沒受影響.
  4. 屬性選擇子(選取器) : 其合併
    1. 簡單型寫法: 元素名稱<元素名稱>[屬性名稱] {css的宣告; },例如:<img>[title]{border: 3px red solod;},這表示 img 凡有標示屬性title者,都受此css影響成紅色框,</p>
    2. 完整型寫法: 元素名稱<元素名稱>[屬性名稱="數性值"] {css的宣告; },例如:<img>[title="ABC"]{border: 3px red solod;},這表示 img 標示屬性title為"ABC"者,都受此css影響成紅色框,</p>
    3. 部份型寫法: 元素名稱<元素名稱>[屬性名稱 ~="數性值"] {css的宣告; },例如:<img>[title="ABC"]{border: 3px red solod;},這表示 img 標示屬性title有一部份為"ABC"者,就受此css影響成紅色框,</p>
    4. 連序字型寫法: 元素名稱<元素名稱>[屬性名稱 |="數性值"] {css的宣告; },例如:<img>[title |="ABC"]{border: 3px red solod;},這表示 img 標示屬性title有"ABC"及 "ABC-xxx"者,都受此css影響成紅色框,</p>
  5. 擬態類別選擇子(選取器) : 應用在元素上的css: 例如: a: link{css宣告} ,這表示,尚未點擊拜訪過的連結, a: visited ,表示拜訪過的連結 , a: hover 這表示滑鼠指標一到連結時, a: active ,這表示正在連結狀態 </p>,其它擬態 input:focus {css宣告;} 及 li:first-child{css宣告;} 或 h3:lang(en){css宣告;}之應用.

範例一: 後代選擇子(選取器)的CSS影響範圍


範例二:子代選擇子(選取器)的CSS影響範圍


範例三:相鄰選擇子(選取器)的CSS影響範圍