相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器

CSS3的高级选择器在开发中还是蛮有用的，下面我们来看一下都有哪些高级选择器。

1、相邻兄弟选择器

作用：匹配指定元素的相邻【下一个】兄弟元素

语法：由 + 号来充当连接符，如 选择器1+选择器2

示例：html代码如下

   
我是d2
   
我是p1
   
      
HTML
      
css
      
Javascript
   
   
      
HTML
      
css
      
Javascript
   

我们用相邻兄弟原则器选择id为p1的元素下面id为u1的元素，给它背景设置为红色

#p1+#u1{background:#f00;}

效果如下：

2、通用兄弟选择器

作用：匹配到某元素【后面的】 【所有指定】兄弟元素

语法：由~充当结合符，如 选择器1~选择器2

示例：

我们用通用兄弟选择器选择id为p1的元素后面所有的ul元素，将其背景设置为红色

#p1~ul{background:#f00;}

效果如下：

3、属性选择器

3.1、[attribute]:匹配具有attribute属性的元素

如：div[id]:匹配所有具备id属性的div

3.2、element[attr1][attr2] 匹配所有具备attr1属性以及attr2属性的element元素

如：div[id][class] 匹配同时具备id和class属性的div

3.3、element[attr=value] 匹配attr属性值为value的element元素

如：input[type=text] 或 input[type='text']，匹配type为text的input元素

3.4、element[attr~=value] 匹配attr属性值为一个值列表，并在此列表中包含单词value的element元素

如：

div[class~=content]:   能匹配
div[class~=lf]:              能匹配
div[class~=on]:           不能匹配

3.5、element[attr^=value] 匹配attr属性值，以value开始的element元素

如：div[class^=my]: 匹配class属性值以my开始的div元素

3.6、element[attr$=value] 匹配attr属性值，以value作为结束的element元素

如：div[class$=over]: 匹配class属性值以over作为结束的div元素

3.7、element[attr*=value] 匹配attr属性值中【包含】value的element元素

如：div[class*=on] 匹配class属性值中包含on的div元素

4、伪类选择器

4.1、目标伪类：突出显示活动的锚点元素

语法：:target

如：

a:target{}

div:target{}

4.2、元素状态伪类：多数用在表单控件上，去匹配表单控件的不同状态

4.2.1、:enabled       匹配每个已启用元素（所有表单控件）

4.2.2、:disabled      匹配每个被禁用元素（所有表单控件）

4.2.3、:checked      匹配每个已被选中的input元素（适用radio和checkbox）

4.3、结构伪类：从标记的层次结构来匹配元素

4.3.1、:first-child     匹配属于父元素中的首个子元素

4.3.2、:last-child     匹配属于其父元素中的最后一个子元素

4.3.3、:empty          匹配没有子元素（包含文本内容）的元素

4.3.4、:only-child   匹配属于其父元素中的唯一子元素

4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素

4.4、否定伪类：将匹配的元素排除在外

语法：:not(selector);

5、伪元素选择器

5.1、::first-letter    获取匹配元素的第一个字母（字符）

5.2、::first-line      获取匹配元素的首行

5.3、::selection    匹配用户选取的部分

注意：W3C规定所有的伪类选择器全部使用一个冒号，在CSS3中，所有的伪元素选择器，全部使用两个冒号。

2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。自己也一边 
看一边学习，只是有新样式在部分浏览器是不支持的，但是也不妨碍我们对新的技术的追求。也随着现代浏览器的标准化，这些css3的新样式是迟早用的着，虽 
然知识有点基础，但是每个技术都是基础牢固才会有更好的发展与突破，经常跟一些很牛逼的人聊天，他们都是工作一定的时候反过去看一些基础理论性的东西 
，所以不要轻视基础，只有基础扎实，你的技术大厦才能更高，废话不多说，今天就从css3的选择器说起。

css3之属性选择器

css3之属性选择器，其中包括：

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器

　在css3中，共有11中UI状态伪类选择器，分别是E:hover,E:active,E:focus,E:enabled,E:disabled,E:read-only,E:read-write,E:checked,E:default,E:indeterminate及E::selection我们来看下这11种选择器被浏览器的支持的情况

 1>层次选择器 2>结构伪类选择器 3>属性选择器