周末在家研究了一下bootstrap-sass 的源代碼如暖，發(fā)現(xiàn)自己對于選擇器還不是很明白在扰。
做了一些筆記和大家分享。
1. ^ => start with
a[href^="http://"] {
color: green;
}
a[href^="http://"]的意思就是：如果html中有a[href=... ]這樣的元素释树，并且href后是以http為開頭削祈，匹配它，然后你就可以針對其寫專門的css.
但是這個有一點尷尬肮砾，有時候項目寫的不是很注意的話诀黍，所有的link都可能是以http開頭的，這時候基本就傻眼了仗处，但是你可以做一些來防止這樣的事情發(fā)生眯勾。
a[href^="http://"] {
color: green;
}
a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
color: blue;
}
不過這樣也不是很保險枣宫，因為https這個情況還沒有被包含到。
當(dāng)然更不能和a[hreflang|="en"]這里面的｜混起來吃环，它匹配的是以 en開頭并且跟著-的也颤，比如en-US,en-BR，當(dāng)然還有它自身en
2. $ => end with
a[href$=".pdf"] {
background: url(../images/pdf.png) no-repeat center right;
padding-right: 20px;
}
這個和上面相差不大郁轻，即是以該元素結(jié)尾翅娶。
3. * => contain with
div[class*="post-"] p {
color: green;
}
*代表包含，如果你的class里面包含了post- 好唯，比如說post-robin竭沫， css就會對它生效
當(dāng)然這個我們還是比較熟悉的嘛，畢竟我們寫了很多的css都是這樣的
* {
background-color: yellow;
}
這個選擇器下的css對整個頁面都會生效骑篙。
不過如果單單只是這種情況的話蜕提，其實之前提到的那個方法更合適一些，即
div[class|="post"]
4. ~
a[rel~="copyright"] {
color: green;
}
這個是匹配的情況是當(dāng)rel有很多的值替蛉，且值是用空格分割的贯溅，那么如果其中的一個值恰好是copyright，那么就會成功
5 更多的
順便梳理下其他必須用到的躲查，大家都復(fù)習(xí)一下吧它浅。
h2+p代表是擁有相同父親元素的相鄰元素，當(dāng)然镣煮，它們必須是鄰近的姐霍！
h2~p和 + 所代表意義幾乎是一樣的，但是不要求兩者相鄰典唇。
.parent .child {//只要.parent的后代即可,孫子元素亦可
background-color: red;
}
.one > .two {//必須是直接后代镊折，否則不會生效
background-color: red;
}
div[style] { //匹配的是<div style="xxx">
background-color: red;
}
input[type="text"] { //匹配的是<input type="text">
background-color: red;
}
偽類
a:link /* unvisited links */
a:visited /* visited links */
a:hover /* user hovers */
a:active /* active links */
a:focus
a:focus:hover
p::first-line { text-transform: uppercase }
p::first-letter { color: green; font-size: 200% }
用于不同元素的變化，這個也很有用介衔，可以不需要再用后臺語言控制樣式恨胚，而這個的用法也有很多變化，感興趣可以去查文檔炎咖。
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
資料引用:
