css3选择器

6-1.css3选择器
css3增加的属性选择器（通配符）
 Element[attribute^="value"]  选择匹配元素Element，并且E元素定义了以value值开头的任意字符串的属性attribute值。
 Element[attribute$="value"]  选择匹配元素Element，并且E元素定义了以value值结尾的任意字符串的属性attribute值。
 Element[attribute*="value"]  选择匹配元素Element，并且E元素定义了包含value值任意字符串的属性attribute值。


结构性伪类选择器-- root，相当于匹配元素E所在文档的根元素。




结构性伪类选择器-- not，否定选择器，可以选择除了某个元素之外的所有元素。


结构性伪类选择器-- empty，选择器表示的是空，用来选择没有任何内容的元素，这里的内容指的是一点内容都没有，空格也不行。


结构性伪类选择器-- target，目标选择器，用来匹配文档的URI的某个标识符的目标元素
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">content for brand</div>
css/*
 #brand:target {
  background: orange;
         color: #fff;
 }可以对id="brand"的div设置样式
*/


结构性伪类选择器-- first-child，选择器表示选择父元素的第一个子元素的元素E。
结构性伪类选择器-- last-child， 选择器表示选择父元素的最后一个子元素的元素E。


结构性伪类选择器-- nth-child(n)，选择器用来定位父元素中包含某一特性的一类的一个或者多个子元素。
其中n是参数，而且可以是(1,2,3,4)数值，也可以是表达式（2n+1、-n-5）或者是关键词（odd、even），但是参数n的起始值始终是
1，而不是0.


结构性伪类选择器— nth-last-child(n),和nth-child类似，区别是从某父元素的最后一个子元素开始计算，来选择特定的元素。


:first-of-type选择器，类似于first-child，不同点是指定了元素的类型，用来定位一个父元素下的某个类型的第一个子元素。
:nth-of-type(n),选择器选择父元素中指定某种类型的子元素。
:last-of-type选择器。和first-of-type选择器功能是一样的，区别是选择最后一个子元素。
:nth-last-of-type(n)，选择父元素中指定某种类型的子元素，它的起始方向是从最后一个子元素开始。
:only-child选择器，选择父元素中只有一个子元素，而且只有唯一的一个子元素。
:only-of-type,选择一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以
选中这个元素中的唯一一个类型子元素。


7-1.其他选择器
:enabled/:disabled
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默
认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。


:checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，
我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。


:selection伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体， 有的设计要求不
使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。
不过在Firefox浏览器还需要添加-moz-前缀。


:read-only伪选择器用来指定处于只读状态元素的样式，也就是说，元素中设置类"readonly"='readonly'
:read-write选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式.