周末在家研究了一下bootstrap-sass 的源代码，发现自己对于选择器还不是很明白。
做了一些笔记和大家分享。
1. ^ => start with
a[href^="http://"] {
color: green;
}
a[href^="http://"]的意思就是：如果html中有a[href=... ]这样的元素，并且href后是以http为开头，匹配它，然后你就可以针对其写专门的css.
但是这个有一点尴尬，有时候项目写的不是很注意的话，所有的link都可能是以http开头的，这时候基本就傻眼了，但是你可以做一些来防止这样的事情发生。
a[href^="http://"] {
color: green;
}
a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
color: blue;
}
不过这样也不是很保险，因为https这个情况还没有被包含到。
当然更不能和a[hreflang|="en"]这里面的｜混起来，它匹配的是以 en开头并且跟着-的，比如en-US,en-BR，当然还有它自身en
2. $ => end with
a[href$=".pdf"] {
background: url(../images/pdf.png) no-repeat center right;
padding-right: 20px;
}
这个和上面相差不大，即是以该元素结尾。
3. * => contain with
div[class*="post-"] p {
color: green;
}
*代表包含，如果你的class里面包含了post- ，比如说post-robin， css就会对它生效
当然这个我们还是比较熟悉的嘛，毕竟我们写了很多的css都是这样的
* {
background-color: yellow;
}
这个选择器下的css对整个页面都会生效。
不过如果单单只是这种情况的话，其实之前提到的那个方法更合适一些，即
div[class|="post"]
4. ~
a[rel~="copyright"] {
color: green;
}
这个是匹配的情况是当rel有很多的值，且值是用空格分割的，那么如果其中的一个值恰好是copyright，那么就会成功
5 更多的
顺便梳理下其他必须用到的，大家都复习一下吧。
h2+p代表是拥有相同父亲元素的相邻元素，当然，它们必须是邻近的！
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 */
资料引用:
网友评论