css3选择器

CSS3选择器分类

CSS3选择器

通过基本选择器就可以确定HTML树形结构中大多数的DOM元素节点。
| 选择器 |类型 |说明 |
|--|--|--|--|
| * |通配选择器 |选择文档中所有的HTMl元素 |
|E|元素选择器|选择指定类型的HTMl元素|
| #ID |ID选择器 | 选择指定ID属性值的元素|
| .class | 类选择器 |选择指定class属性的元素 |
| selector1，selectorN | 群组选择器 | 把每一个选择器匹配的元素集合并 |

//css:
* {
    margin: 0;
    padding: 0;
}

.demo div {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin: 10px;
}

.demo * {
    background: blue;
    color: #ffffff;
}
//html:
    

       
1
       
2
       
3
       
4
       
5
       
6
       
7
       
8
       
9
 
    
 

层次选择器，常用的选择器
| 选择器|类型|说明 |
|--|--|--|--|
|E F |后代选择器 |选择匹配F的元素，F被包含在E里面|
|E>F|子选择|选择F元素，并且F元素是E元素的子元素|
|E+F|相邻兄弟选择器|选择F元素，并且F元素紧跟在E元素的后面|
|E~F|通用兄弟选择器|选择F元素，并且位于匹配E元素后的所有匹配F元素|

动态伪类选择器：动态伪类并不存在与HTML中，只有在用户和网站交互时才会体现出来！

选择器	类型	说明
E:link	链接伪类选择器	选择匹配E的元素，并且匹配元素定义分超链接未被访问过，通常用在链接锚点上。
E:visited	链接伪类选择器	选择匹配E的元素，并且匹配元素定义分超链接已经被访问过，通常用在链接锚点上。
E:active	用户行为伪类选择器	选择匹配元素的E元素上，并且匹配元素被激活。常用于锚点和按钮上
E:hover	用户行为伪类选择器	选择匹配E的元素，并且用户鼠标停留在E元素上。
E:focus	用户行为伪类选择器	选择匹配E的元素，并且匹配的元素获得焦点

目标伪类选择器：“:target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI[插图]中某个标志符的目标元素。

选择器	类型	说明
E:target	目标伪类选择器	选择匹配E的所有元素，并且匹配元素被相关URL指向

语言伪类选择器：语言伪类选择器是根据元素的语言编码匹配元素
使用HTML5，则直接设置文档的语言

语言伪类选择器允许不同的语言定义特殊的规则，一般在多语言版本的网站中用的比较多些
E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language

UI元素状态伪类选择器：UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等，表单中常用的伪类选择器如下：

选择器	类型	说明
E:checked	选中状态选择器	匹配选中的复选框或单选按钮表单元素
E:enabled	启动状态伪类选择器	匹配所有启动的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

结构伪类选择器：根据元素在文档树中的某些特性（如相对位置）定位到它们

选择器	说明
E:first-child	父元素的第一个子元素，与E:nth-child(1)相同
E:last-child	父元素的最后一个子元素，与E:nth-last-child(1)相同
E:root	选择匹配元素所在的根元素，在HTML中根元素始终都是html,该选择器与HTML类型选择器匹配的内容相同。
E:nth-child(n)	选择父元素的第N个子元素，N是整数（1,2,3）、关键字（even、odd）、公式（2n+1），n的初始值为1.
E:nth-last-child(n)	选择父元素的倒数第n个子元素
E:nth-of-type(n)	选择父元素内具有指定类型的第n个元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个元素
E:first-of-type	选择父元素内具有指定类型的第一个元素
E:last-of-type	选择父元素内具有指定类型的最后一个元素
E:only-child	选择父元素只包含一个子元素
E:only-of-type	选择父元素只包含一个同类型的子元素
E:empty	选择没有子元素的元素，并且该元素没有任何文本节点

否定伪类选择器：主要用来定位不匹配该选择器的元素

选择器	说明
E:not(F)	匹配所有除元素F外的E元素

伪元素：CSS3中，在以前的基础上增加一个冒号。如：
::first-line 、::first-letter 、::before 、::after 、::selection，双冒号和单冒号主要是用来区分伪类和伪元。两种方式都被各种浏览器支持，
对于IE6~IE只支持单冒号的方式。

::first-letter，用来选择文本块的第一个字母
::first-line,用来匹配元素的第一行文本，应用一些特殊的样式，给文本添加一些细微的区别。
::before和::after，用来插入额外内容的位置，生成的内容不会成为DOM的一部分，
但是和DOM一样可以设置样式。必须要匹配content属性才能生成内容。
::selection,用来匹配突出显示的文本。但是它仅仅接受两个属性：background和color。

属性选择器：

选择器	说明
E:[attr]	选择具有某个属性的元素
E:[attr=val]	选择属性为attr并且属性值为val的元素
E:[attr	=val]	选择attr属性值为val或者val-开头的所有字符串属性元素
E:[attr~=val]	选择匹配元素的某个属性具有一个或多个属性值，多个属性值用逗号隔开，当属性值中有一个艺术性与之匹配，就选中该元素。
E:[attr*=val]	选择属性为attr并且属性值含有val字符串的元素
E:[attr^=val]	选择attr属性值以val开头的所有元素
E:[attr$=val]	选择attr属性值以val结尾的所有元素