CSS 选择器简介

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　如果以4位数表示选择符权重，那么：

CSS选择器简介：

简单属性选择器：img[title]，获取设置了alt属性的img元素；#wrapper[outter]，获取 id 为 wrapper 并且具有属性 wrapper 的元素；
具体属性选择器：input[type="button"]，获取属性值 button 的 input 元素；#wrapper[outter="abc"]，获取 id 为 wrapper 并且属性 outter的值为 abc 的元素；
部分属性选择器：div[class ^="a"]，获取 class 属性值以 a 为开头的 div 元素；div[class $="b"]，获取 class 属性值以 b 为结尾的 div 元素；

分组选择器，将要分组的选择器用逗号隔开；#wrapper , #content{...}，获取 id 为 wrapper 的元素，和 id 为 content 的元素，两个都获取；
后代选择器，将要分组的选择器用空格隔开，#wrapper #content{...}，在 id 为 wrapper 的元素对象内部，获取 id 为 content 的元素，可能是子元素，也可能是子孙元素；
子元素选择器，将要分组的选择器用大于号隔开，#wrapper > #content{...}，在 id 为 wrapper 的元素对象内部，获取 id 为 content 的子元素，只往下找一级；子元素选择器和后代选择器不太一样，后代选择器包含子元素选择器，并且后代选择器还会继续向下查找；
兄弟元素选择器：

相邻兄弟选择器（IE6及以下不支持），将要分组的选择器用加号隔开，.wrapper + .content{...}，获取 class 为 wrapper 的元素之后，紧接着的这一个 class 为 content 的元素，和通用兄弟选择器不同的是，相邻兄弟选择器只获当前元素之后取紧接着的这一个元素，后面就算还有相同的，也选择不到了；
通用兄弟选择器（IE7及以下不支持），将要分组的选择器用波浪号隔开，.wrapper ~ .content{...}，获取 class 为 wrapper 的元素之后，所有的 class 为 content 的元素，和相邻兄弟选择器是不一样的；

:root 选择文档的根元素，即 html 元素；
input:focus，当前 input 框获得焦点；
element:hover，鼠标悬停在当前元素上面；
div:nth-of-type(n)，选择是其父元素的第 n 个 div 元素，这个是依照父元素内部的 div 元素的顺序计算 n ，然后获取的； n 是整数，并且从1开始，也可以是公式，也可以是关键字even（偶数）、odd（奇数）；
div:first-of-type，选择是其父元素的第 1 个 div 元素，与 div:nth-of-type(1) 效果相同；
div:last-of-type，选择是其父元素的最后一个 div 元素，注意前面没有 nth；
div:nth-last-of-type(n)，选择是其父元素的第 n 个 div 元素，但是是从最后一个子项往前数，注意前面有 nth；
div:nth-child(n)，选择是其父元素的第 n 个子元素，并且得是 div 元素，这个是依照父元素内部的子元素的顺序计算 n ，然后再看第 n 个是否为 div 元素；这就出现一种情况，第 n 个子元素可能不是 div ，然后就获取不到了，所以用 nth-of-type(n) 会好一点；
div:first-child，选择是其父元素的第 1 个元素，并且是 div 元素，与 div:nth-child(1) 相同；
div:last-child，选择是其父元素的最后一个元素，并且是 div 元素；
div:nth-last-child(n)，选择是其父元素的第 n 个子元素，并且得是 div 元素，但是是从最后一个子项往前数，注意前面有 nth；
还有很多其他的...

秒客网