css-选择器

1. 基本元素选择器 div{…}

2. 类选择器 .active{…}

1. 有个点[ . ] ？才不是咧！
   其实是 省略了通配符的 *.active
   所以，本质上还是通过选择元素，再进行筛选。所以，不加空格就可以直接进行筛选了！比如 div.active{…}选择的是有class=”active”的div，而div .active{…}选的是div里子元素有class=”active”的。这个空格要注意哟。
2. 多类选择器，匹配 同时 含有 这两个类的元素。
   .important.warning{ background:silver; }
   重要事项：IE7 之前都不能正确地处理多类选择器。

3. ID选择器 #btn{….}

类选择器还是ID 选择器？
区别1：只能在文档中使用一次
与类不同，在一个HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别2：不能使用 ID 词列表
不同于类选择器，ID选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别3：ID 能包含更多含义
类似于类，可以独立于元素来选择ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

4. 属性选择器 a[href=”www.baidu.com”]{…}

这个还是去网站看吧 http://www.w3school.com.cn/css/css_selector_attribute.asp
不太会总结，总之div[class=xxx]是全匹配。不想全匹配的时候用~|

5. 后代选择器 和子选择器 div p > span{…}

后代选择器：直接空格隔开 div p{color:#fff}
子选择器: div > p {...}
子选择器不会选到孙子上，还是很好的！可以分层了太赞！

6. 相邻兄弟选择器 p + h1{…}

选择的是：在同一个父元素里，跟在一个P后面的h1。
(在给<ul><li>去边框或者加边框的时超好用，因为li+li会匹配除了第一个li之外的所有li标签，这样设置border-top:none时，其实边框正正好不会重复，顶部的也不会消失！类似的好用法应该很多，但是这样真的超棒的！)

7. 伪类 a:link{…}

重点内容：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。

1. :first-child
   有误会哎！不要只写到父元素，不然人家不能确定你要变化的元素类型啦…反正就是，这个child其实要写到那个child的元素类型哦！
   比如， div p:first-child会选择到div里的第一个p元素。而不是div的P元素的第一个孩子。懂了么~
2. :nth-child(n)不只能选择第一个孩子啦！还能选择第几个了！赞啊！

8. 伪元素

1. :first-letter 向文本的第一个字母添加特殊样式。
2. :first-line 向文本的首行添加特殊样式。
3. :before 在元素之前添加内容。
4. :after 在元素之后添加内容。

以上内容整理自w3school/css