css之选择器(selector)

目录

css3选择器分类

基本选择器
层次选择器
伪类选择器
伪元素
属性选择器

其中最为复杂的是伪类选择器。
以下是css3选择器的分类图

1.基本选择器

*/E/#id/.class/selector1,delectorN

兼容性

所有的浏览器都支持基本的选择器。

2.层次选择器

选择器	类型
E F	选择E的后代F
E>F	选择E的子元素F
E+F	选择E的相邻元素F(后面的)，相当于next
E~F	选择E后面的所有元素F，相当于sibilings

兼容性

IE6不支持下面3个，其他的基本ok。不用考虑IE6就随便用。

3伪类选择器

动态伪类
目标伪类
语言伪类
UI状态伪类
结构伪类
否定伪类

1	E:pseudo-class { property: value}

3.1动态伪类选择器

选择器	类型	功能
E:link	链接伪类	未点击过的超链接
E:visited	链接伪类	访问过的超链接
E:active	用户行为链伪类	被激活的超链接
E:hover	用户行为链伪类	不解释
E:focus	用户行为链伪类	也不解释

兼容性

除了:active和:focus是IE8+以上才支持的，其他基本是没有兼容性问题的。

3.2目标伪类选择器

:target用于选取锚点或者链接#后面的目标元素。

目标伪类是属于动态的，只在存在URL指向时候才有效。

兼容性

IE8+才支持。

对于8以下的解决方案。
解决方案

3.3语言伪类选择器

略

3.4UI元素状态伪类选择器

包括：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机。

选择器	类型	功能
E:checked	选中	选中的复选按钮或者单选按钮
E:enabled	启用	选中所有启动的表单元素
E:disabled	禁用	选中所有禁用的表单元素

兼容性

IE9+以上才支持，对于IE6-8则可以采用一下两种方式：

定义类，然后设置样式。
js库

3.5结构伪类选择器

选择器	功能
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E:root	E所在文档的根目录
E:nth-child(n)	作为父元素的第n个子元素的元素E
E:nth-last-child(n)	作为父元素的倒数第n个子元素的元素E
E:nth-of-type(n)	作为父元素指定的第n个元素E
E:nth-last-of-type(n)	作为父元素指定的倒数第n个元素E
E:first-of-type	作为父元素指定的第一个元素E
E:last-of-type	作为父元素指定的最后一个元素E
E:only-child	父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	作为父元素只包含同一类子元素
E:empty	作为父元素指定的第一个元素E

用一张图来说明：

兼容性

IE9+

3.6否定伪类选择器

E:not()

4伪元素选择器

::first-letter
::first-line
::before/::after:生成内容，内容不属于DOM，但是可以设置样式。
::selection:(只能是background和color)

5属性选择器

选择器	功能
E[attr]	具有属性attr的元素E
E[attr=val]	具有属性是attr=val的元素E
E[attr~=val]	attr属性具有多个空格分割的值，其中一个值是val
E[attr竖=val]	attr属性的值是val或者以val-开头的值
E[attr*=val]	attr属性的值包含val即可
E[attr^=val]	attr属性的值以val开头
E[attr$=val]	attr属性的值以val结尾

兼容性

IE7+

说明

整理自《图解css3》
无技术含量，就是写博客的过程中整理思路。