https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors
在css3規範中，定義了以下幾種型別的selector:
- Basic selector
- type selector: elementname
- class selector: .classname
- ID selector: #idName
- universal selector: * ns|* *|*
- attribute selector [attr=value]
- Combinators
- adjacent sibling selectors A+B
- General sibling selectors A~B
- Child selectors A>B
- Descendant Selectors A B
- Pseudo-elements
- Pseudo-classes
對於外部連結標識為藍色；
a[href^="http://"] {
color: blue;
}
[attr~=special]{} 實際上 類選擇器就是這種屬性選擇器的特例 .special = [class~="special"]
則選中所有class屬性中包含了special並且以空格分割（或者在首位上），比如<a class="special"> <a class="one special">都將被選中
[attr=value]{}表示包含一個值為value的屬性的元素，實際上id選擇器就是這種屬性選擇器的特例 #value = [id="value"]
對於內部連結標識為紅色
a[href^="/internal"] {
color: red;
}
[lang |=en]這個將選中 <p lang="en"> <p lang="en-us"> <p lang="en-au">，一般用的很少
對於以.pdf結尾的href連結，其背景將增加一個pdf.png來標識這是一個pdf檔案
a[href$=".pdf"] {
background:url('/images/pdf.png') no-repeat 0 2px;
}
對於src屬性中包含thumb的img元素，則更改border屬性
img[src*="thumb"]{
borader: 5px solid;
}
再比如a[href*="lady.xx.com"]{color: purple}所有女性頻道都以purple作為文字顏色
- pseudo classes:(:active,:any,:checked,:default,:dir(),:disabled,:empty,:enabled,:first,:first-child,:first-of-type,:fullscreen,:focus,:hover,:indeterminate,:in-range,:invalid,:lang(),:last-child,:last-of-type,:left,:link,:not(),:nth-child(),nth-last-child(),:nth-last-of-type(),:nth-of-type(),:only-child,:only-of-type,:optional,:out-of-range,:read-only,:read-write,:required,:right,:root,:scope,:targe,:valid,:visited,::first-letter,::first-line)
li:nth-child(an+b) 比如3n+2則每隔3個就會被選擇，而第一個被選中的是第2個li
div:nth-of-type(odd)所有奇數的div被選擇(無論是否其前後有無非div元素干擾）
div:nth-last-of-type(2) ：從最後一個div來計算，其倒數第2個div將被選擇
p：only-of-type { 只有一個p元素情況下，這個p元素就將被選擇
}
:root 指示根元素，這個必html有更多的specifity,除此外實際上和html 元素選擇器是一樣的；
:target: href{
background: blue;
color: white;
}
中所指示的元素，也就是說當點選後將會target到對應的元素，這個pseudo就選擇這個target元素
:empty{ 所有沒有任何東西在裡面的元素都將被選中；
}
div:empty{}所有空的div元素將被選中；
div:not(:empty){} 所有非空的div元素被選擇；
div:not([id="s1"])所有除了id為s1以外的所有div元素將被選擇
ipnut[type="submit"]所有type屬性為submit的input元素都被選擇
:enabled 被使能的元素；
input[type="text"]:enabled{}所有被enabled的text input元素
:disabled 被disable的元素；
input[type="radio"]:checked + label { 被選中狀態的radio及其對應label字型放大
font-size: 22px;font-weight: bold;
}
.intro::first-line{}在.intro這個類中，第一行將被選中
.intro::first-letter{ 注意.intro段落中的首字母被設定為float，並且設定相關marging,padding
float:left;
margin: 10px 10px;
padding: 5px 10px;
background: #e0e0e0;
font-size: 100px;
line-height: 1;
}
<div>
<h2>標題</h2>
<p>段落1(h2+p/h2~p) </p>
<p>段落2(h2~p)</p>
</div>
上面的例子中，h2+p選中前面為h2的p元素，h2~p則選中前面有一個h2的p元素（但是沒有必要是直接緊鄰！！）
- pseudo elements(::after, ::before,,::selection,::backdrop)
::before可以在一個特定元素前增加content。例如，在一個blockquote內容前增加一個左雙引號或者在一個特定的段落前“新增”一個image
::after可以在一個特定元素後面增加content.比如，在一個blockquote後面增加右雙引號。或者更多的，::after pseudo element用於實現clearfix的功能，也就是在一個元素內容後面增加一個empty space但是卻無需額外增加任何html markup來實現clear floats
Pseudo Elements vs Pseudo Selectors
之所以我們把::before/::after稱之為pseduo elements（而不是selector)是因為他們本身並不會選擇到任何存在於page的dom中的"real" element。而像前面提到過的first-letter,first-line他們本身是選擇到dom中的首字母，首行，所以我們稱它為pseduo-class
Pseduo class和一般的class有相同的specificity
li:first-line {} /* specificity = 0,0,1,1 */ li.red {} /* specificity = 0,0,1,1 */
::after/::before詳解
::after是一個pseduo element，使用它允許你通過css向一個page中插入content（同時不需要::after本身存在於html中！）雖然最終的::after定義的內容本身不在DOM中，但是它卻就像普通元素一樣顯示在html頁面中，就像下圖所示：
CSS: div::after { content: "hi"; } HTML: <div> <!-- Rest of stuff inside the div:該div的其他任何內容！hi將被疊加在這個content的後面！ --> hi </div>
::before和::after是完全一樣的，唯一的區別僅僅是：它將在content之前插入::before定義的內容。你可能在以下幾種場景選擇使用：
你希望generated content位置上放在element content之前；
::after content也確實在source-order上是靠後面的，所以::after在自然stack時將被放在::before的上面
content的值可以是：
- string:注意特殊的字元需要特別被編碼成為一個unicode entity
Special Characters
| " | " | " | quotation mark | u+0022 ISOnum | p:before { content:"\0022"; } | alert("\42") |
| & | & | & | ampersand | u+0026 ISOnum | p:before { content:"\0026"; } | alert("\46") |
| < | < | < | less-than sign | u+003C ISOnum | p:before { content:"\003c"; } | alert("\74"); |
| > | > | > | greater-than sign | u+003E ISOnum | p:before { content:"\003e"; } | alert("\76"); |
https://css-tricks.com/snippets/html/glyphs/
http://inamidst.com/stuff/unidata/
- image
content: url(/path/to/image.jpg); the image is inserted at it's exact dimentions and can not be resized.
- nothing: 對於clearfix非常有用
- counter： content: counter(li);
注意你不能插入HTML，比如: content: "<h1>nope</h1>"
使用before/after pseudo element通過一個element來實現多重背景或者邊框的案例
為了實現上面的目標，我們可以把pseudo-element pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.
pseudo elements本身不含任何content,他們被absolutely positioned.這意味著他們可以被拉伸並且放到任何“parent" element中而不用影響parent的content.這可以通過使用top,right,bottom,left,width和height屬性來實現。
上面的多背景樣例：元素本身有其background image並且可以設定任何希望的padding.通過relatively positioning the element,parent element就將成為當對pseudo-elements做absolute 定位時的reference point.而改變z-index的值就將允許調整隨在前誰在後。
#silverback { position: relative; z-index: 1; min-width: 200px; min-height: 200px; padding: 120px 200px 50px; background: #d3ff99 url(vines-back.png) -10% 0 repeat-x; } #silverback:before, #silverback:after { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding-top: 100px; } #silverback:before { content: url(gorilla-1.png); padding-left: 3%; text-align: left; background: transparent url(vines-mid.png) 300% 0 repeat-x; } #silverback:after { content: url(gorilla-2.png); padding-right: 3%; text-align: right; background: transparent url(vines-front.png) 70% 0 repeat-x; }
兩個pseudo-elements都被絕對定位並且固定在元素的兩邊，z-index設定為-1意味著pseudo-elments將被放到content layer的後面。這種情況下，pseudo-elements將在element的background的上方，而在元素內容本身的下層，所以元素仍然可以被選擇。
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
<div id="silverback"> <strong>Only one element</strong> to reproduce <a href="http://silverbackapp.com/">Silverback</a>'s parallax effect with more gorillas. <pre><code><div id="silverback">[content]</div></code></pre> </div>