CSS属性、伪类选择器，CSS3选择器

CSS1时IE6是部分支持，伟大的IE6！CSS2时IE6部分支持，伟大的IE6依旧是部分支持！CCS3盛行CSS4也已经提上日程的如今，IE6彻底不支持。IE6你该走了，咱们会永远记住你的功绩的！IE6在天朝什么时候能寿终就寝！

以上跟本文章无关，今天咱们来CSS的选择器，虽然IE6不支持，可是jqurey实现了CSS的不少选择器的，因此就当温习jqurey的选择器。

由于伟大的IE6不支持CSS2的有些高级属性，因此CSS选择器一直没有发挥。要记住一点：对于站点功能很重要的元素仍是不要用一些“高级的东西”，由于在天朝都是盗版XP。

正文：选择器的做用就是“选择”和“过滤”两个功能，而且能够混合使用。主要的区别是”过滤”做用的选择器是指定条件从前面匹配的内容中筛选。

基本选择器

基本选择器很简单，以下：

1. * ：通用元素选择器，匹配任何元素
2. 元素选择器 ：选取某个 HTML 元素，好比 p、h一、em、a，甚至能够是 html 自己
3. 类选择器 ：形式 .通配符 ,既选取全部class属性中包含通配符的元素
4. ID 选择器：形式 #通配符 ,既选择ID属性中包含通配符的元素，只能有一个
5. 后代选择器：既选取某元素的后代元素,如 #father .son
6. “>”：既选取某个元素的第一级子元素， 表明子选择器，
   IE6不支持
7. “~”：既选取全部兄弟元素。如 div~p div的 兄弟p元素 将被选取。
   IE6不支持
8. “+”：既选择兄弟元素后面紧跟的第一个元素。如 div>p div的 p兄弟元素中的第一个 将被选择。
   IE6不支持

高级选择器

首先确保了解CSS优先级的工做原理，否则被覆盖还没知道什么什么缘由。本页全部DEMO

属性选择器

属性选择器(Attribute selector)是CSS 2 引入了属性选择器。

咱们能够只指定该元素的某个属性，这样全部使用该属性都将被选取；也能够更加明确并定位在这些属性上使用特定值的元素 。以下

1. [att] 简单属性选择：选择有某个属性的元素，能够根据多个属性进行选择，只需将属性选择器连接在一块儿。
2. [att=value] ：属性跟值都要求同样，也能够根据多个属性进行选择。
3. [att~=value] 部分属性值选择：根据属性值中的词列表的某个词进行选择，若是忽略了波浪号，则说明须要完成彻底值匹配。
4. [att^=value] ：该属性的值以指定值开始。(好比href=”http://www”，则将二级域名和已经域名区分开来)
5. [att$=value] ：该属性的值包含指定的值(而不管其位置)。(譬如href=”html5jscss”，则选择全部带href带html5jscss的连接)
6. [att*=value] ：该属性的值以指定的值结束。(譬如href=”.pdf”，则选择以.pdf结尾的的连接)
7. [att|=value] ：属性的值等于“value”或以“value-”开始的全部元素，也就是“value-”。(譬如class=”post-bg”)

伪类选择器

伪类选择器以前只能有一个单冒号。

动态伪类

动态伪类只有当用户和网站交互了才能体现出来。

1. :link：选择全部未被点击的链接
2. :visited：选择已被点击的链接
3. :hover：选择悬停其上的链接
4. :active：选择已经其上按下、尚未释放的链接
5. :focus：选择得到当前焦点的链接

:hover在IE6下只有a元素支持，:active、:focus只有IE7-6不支持。

因为CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，必定要按照a:link， a:visited， a:hover， a:actived的顺序书写。

Form元素伪类选择器

1. :enabled 选择器选取全部启用的表单元素。
2. :disabled 选择器选取全部禁用的表单元素。
3. :checked 选择器选取全部选中的复选框或单选按钮。

通常选取表单元素，因此咱们联想到属性选择性，因此咱们能够以下选取文本框

input[type="text"]:disabled {color:#333;}

其余伪类选择器

1. 语言伪类:lang()：一个基于它的语言的元素
2. :first-child：选择父元素中的第一个子元素
3. :first-line：选择元素中的第一行
4. :first-letter：选择元素中的第一个字母
5. :before：元素以前插入生成的内容，如 div:before{content:"这里写你想要在以前插入的内容"}
6. :after：元素以前插入生成的内容，如 div:after{content:"这里写你想要在以前插入的内容"}，咱们有用它来清除浮动

CSS3的高级伪类选择器

1. :first-child ：选择某个元素的第一个子元素；

   注意 :若是写成:first-child 浏览器将自动解析成 *:first-child， * 是匹配全部元素，意思就是选择第一个子元素；而若是写成img:first-child，那么条件则苛刻了，不只是要知足是第一个子元素并且必须是img元素，同时知足这两个条件才能被选取 。
   除了IE6不支持，其余浏览器都支持

2. :last-child ：选择某个元素的最后一个子元素；

   注意 :若是写成:last-child 浏览器将自动解析成 *:last-child，* 是匹配全部元素，意思就是选择最后一个子元素；而若是写成img:last-child，那么条件则苛刻了，不只是要知足是最后第一个子元素并且必须是img元素，同时知足这两个条件才能被选取，就是倒过来的:first-child 。 IE六、IE七、IE8不支持 ，其余浏览器都支持

3. :first-of-type ：选择一个上级元素下的第一个同类子元素；

   注意：若是写成:first-of-type浏览器也将自动解析成 *:first-of-type，这个意思就是第一个子元素 即:first-of-type=:first-child；而若是写成img:first-of-type，那就跟:first-child差异大了，意思是全部img集合里的第一个元素。其实跟:first-of-type跟:first-child彻底是两个概念
   IE六、IE七、IE8和FF3-浏览器不支持

4. :last-of-type ：选择一个上级元素的最后一个同类子元素；

   注意：若是写成:last-of-type浏览器也将自动解析成 *:last-of-type，这个意思就是第一个子元素 即:last-of-type=:last-child；而若是写成img:last-of-type，那就跟:last-child差异大了，意思是全部img集合里的第一个元素。其实跟:last-of-type跟:last-child彻底是两个概念。
   IE六、IE七、IE8和FF3-浏览器不支持

5. :nth-child() ：选择某个元素的一个或多个特定的子元素；

   注意：:nth-child()能够定义它的值（值能够是整数不能为负数，也能够是表达式），如div:nth-child(3)或者div:nth-child(n)，这里的“n”只能是”n”，不能使用其余字母代替。:nth-child(2n)=:nth-child(even),:nth-child(2n-1)=:nth-child(odd)。:nth-child(n+5)从第五个元素开始选择，:nth-child(-n+5)选择第5个前面的（跟:nth-child(n+5)相反）。:nth-child()前面带不带元素跟:first-child同样道理，其实:first-child就是:nth-child的衍生，就专指第一个，而:nth-child是想选哪一个就选哪一个。
   IE六、IE七、IE8和FF3-浏览器不支持

6. :nth-last-child() ：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

   注意：:nth-last-child()是从元素的最后一个开始计算，计算方法跟:nth-child()是同样的，具体区别不说了。
   IE六、IE七、IE8和FF3-浏览器不支持

7. :nth-of-type() ：选择指定的元素；

   注意：:nth-of-type跟:nth-child的关系就比如:first-of-type跟first-child的关系，区别也不说了。
   IE六、IE七、IE8和FF3-浏览器不支持

8. :nth-last-of-type() ： 选择指定的元素，从元素的最后一个开始计算；

   注意：就是:nth-of-type 倒着算，区别：略。 
   IE六、IE七、IE8和FF3-浏览器不支持

9.  nly-child ：选择的元素是它的父元素的惟一一个了元素；

   ： 注意：  :only-child表明只包含一个子元素的div下的子元素,

   CSS属性、伪类选择器，CSS3选择器

    :only-child就是*:only-child意思了，因此没选择就是只包涵一个子集元素的那个子集 。
   IE六、IE七、IE8和FF3-浏览器不支持

10. only-of-type ： 选择一个元素是它的上级元素的惟一一个相同类型的子元素；

    注意：p:only-of-type表明只包含一个p子元素的div下的p元素，就算那个父集有其余元素的子集，只要不是 p 子集，p:only-of-type就能选中。
    IE六、IE七、IE8和FF3-浏览器不支持

11. :empty ：empty选择的元素里面没有任何内容；

    注意：选择没有任何内容的元素 。
    IE六、IE七、IE8浏览器不支持:empty选择器

12. :not ：否认选择器；

    注意：就是排除某个元素，input:not([type="submit"]) {border:0;} 。
    IE六、IE七、IE8浏览器不支持:empty选择器

CSS4 选择器

CSS4选择器预览版提供了对于父选择器和匹配选择器，跟js操做DOM同样。只是出了草案，目前浏览器还不支持，因此就不试验了，等支持了再加在这。

CSS4选择器站位编辑！

摘自：http://www.html5jscss.com/css-selectors-34.html