@(HTML5)[HTML5选择器]
[TOC]
二、HTML5选择器
CSS选择器回顾
- ID选择器
- 类名选择器：多类（.class1.class2）不被
ie6支持 - 标签（元素）选择器
- 组合（后代）选择器
- 通配符选择器
- 直接子元素选择器
>：ie6不支持 - 相邻兄弟选择器
+：ie6不支持 - 属性选择器
-
伪元素选择器
enter image description here -
伪类选择器
enter image description here
CSS新增选择器
通用兄弟（关联）选择器：
~，选择后面的所有的子元素-
属性选择器（新增的）：
-
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写； -
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的； -
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的； -
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value； -
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）; 注意：IE6不支持所有的属性选择器
-
-
:nth选择器:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
-
:nth-child() 选择某个元素的一个或多个特定的子元素；
:nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ :nth-child(n*length)/*n的倍数选择，n从0开始算*/ :nth-child(n+length);/*选择大于length后面的元素*/ :nth-child(-n+length)/*选择小于length前面的元素*/ :nth-child(n*length+1);/*表示隔几选一*/ //上面length为整数 -
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。 :nth-of-type() 选择指定的元素；
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
:first-of-type 选择一个上级元素下的第一个同类子元素；
:last-of-type 选择一个上级元素的最后一个同类子元素；
:only-child 选择的元素是它的父元素的唯一一个了元素；
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty 选择的元素里面没有任何内容
:not 否定选择器
-
UI元素状态伪类
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox"有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
注意：IE6-8不支持":checked",":enabled",":disabled"这三种选择器。著作权归作者所有。
- 伪元素新增
-
::selection选择被用户选中的input：注意是选中，不是获得焦点
