CSS冷门及难理解的选择器学习

        日常你们在写css样式的时候，大都都是用的几个经常使用的选择器，好比类选择器，后代选择器，并集选择器，子选择器等等。不过最近，我学习了一点冷门的选择器，发现这些选择器在特定状况下很是好用，不只能精简HTML结构，还能少些不少重复杂乱的css样式。

 

1、关系选择器 （兼容iE7+）

1.E+F 相邻兄弟选择器：选择紧邻E元素后面的F元素；

    

2.E~F 通用选择器：选择E元素后面全部的F元素；

      

 

2、动态伪类选择器（兼容IE8+）

1.E:active   选择E元素，且该元素被激活；经常使用于锚点和按钮上。

           

2.E:focus  选择E元素，且该元素得到了焦点；

注：button的active与focus选择器区别在于：active是点击button的时候字体变色，focus是点击以后字体才变色。

 

3、目标伪类选择器（兼容IE9+）

E:target  选择E元素，且该元素被页面中相关href指向

          

当点击锚点的时候，p:target 背景变色

 

4、UI元素状态伪类选择器（兼容IE9+）

1.E:checked  选中状态伪类选择器：匹配选中的单选或多选按钮表单元素；

点击单选或多选的时候，选中的元素背景和内容改变。

 

5、结构性伪类选择器（兼容IE9+）

一、E:only-child  匹配E元素，且E元素的父元素只包含一个子元素；

    

二、E:only-of-type  匹配E元素，且E元素的父元素只包含E同类型的元素，且只有惟一一个；

    

三、E:empty  选择没有子元素的E元素，且该元素也不包含任何文本节点；

  

 

6、否认伪类选择器（兼容IE9+）；

E:not(F)  匹配除F元素外的E元素

   

 

7、属性选择器（兼容IE7+）；

1.E[attr |= val ]  匹配E元素，且E元素的属性具备val或val-开头的值；

    

2.E[ attr~=val ] 匹配E元素，且E元素属性具备多个空格分隔的值，其中一个值等于val；

      

3.E[ attr*=val ] 匹配E元素，且E元素属性值任意位置包含了val的字符串；

    

4.E[ attr^=val ] 匹配E元素，且E元素属性值开头位置包含了val字符串；

5.E[ attr$=val ] 匹配E元素，且E元素属性值结尾位置包含了val字符串。

 

        上面这些冷门选择器在我最近的项目都使用上了，很是好用，推荐给你们，css选择器还有不少，但愿你们补充。