CSS Attribute Selectors

從HTML的 attribute 著手以進行設定CSS的一種方式。

• 可針對特定 attribute 或其 value 中含有的特定特定規則的字元，進行設定。
• 基本結構：[attribute="value"]
• 舉例：[attribute^=value] ：其value開頭＝value者。

//CSS:
[class^="top"] {background: yellow;}
//HTML:
<h1 class="top-header">A</h1>
<p class="top_text">B</p>
<p class="left-text">C</p>
<p class="topcontent">D</p>
<p class="go-top">E</p>
//Ａ、Ｂ、Ｄ為黃色

CSS Counters

用以計數，並賦予位置對應的編號

• 可想像成變數：在指定element底下，先將指定變數設定為0，在指定element累加1，再指定輸出內容。
• 組成：counter-reset、counter-increment、content、counter()或counters()
• <注>：1.輸出內容，沒有使用連接符號，例： "$" counter(x) ":"。2.若有重複，照CSS規則走。
• 舉例：

ol {counter-reset: x; list-style-type: none;}
li::before {counter-increment: x; content: "$" counters(x,".") ":" " ";}

CSS Specificity

重複設定CSS時，優先被採取的順序

• 越靠近element的越優先：寫於 element內（Inline） > head中（Internal） > 其他文件中（External）
• ID > Class = Attribute > Element > *
• 複合的比單一單的優先：如 h1.class > .class
• 寫在越後面的越優先。