CSS选择器1. 选择器用来匹配页面(文档)的URL中某个标识符(#)的目标元素, 具体来说,URL中的标识符通常会包

HTML+CSS之选择器

1. 选择器

基本选择器: css1就定义了, 浏览器全部兼容

选择器	类型	功能描述
*	统配选择器	选择文档中所有的HTML元素
element	元素(标签)选择器	选择指定的类型的HTML标签
#id	ID选择器	选择指定标签id属性的值为id的标签
.class	Class(类)选择器	选择指定标签class属性的值为class的标签
selector1,...selectorN	群组选择器	每一个选择器以逗号分开, 全部选中

层级选择器: 浏览器兼容IE7及以上

选择器	类型	描述
E F	后代选择器(包含选择器)	E选择器的标签里面所有的后代F标签(包含子代)
E>F	子代选择器	E选择器的标签里面所有的子代F标签(不包含后代)
E+F	相邻兄弟标签	E选择器的标签同等级后面相邻的F选择器(E与F选择器标签紧挨着)
E~F	通用兄弟选择器	E选择器的标签同等级后面所有的F选择器的标签

属性选择器: CSS3、兼容性IE7及以上、E选择器可以省略

选择器	功能描述
E[attr]	选择器E匹配的标签具有attr属性, E可以省略,让属性进行标签选择
E[attr=val]	选择器E匹配的标签具有attr属性并且值为val(区分大小写), E可以省略
E[attr\|=val]	选择器E匹配的标签具有attr属性并且值为val或val-开头的属性值,E可以省略
E[attr~=val]	选择器E匹配的标签具有attr属性并且值为val的单词(一段英文语句, 其中有一个单词val,前后都是空格, 不管多少, val是独立的就匹配
E[attr*=val]	选择器E匹配的标签具有attr属性并且值为val(一条语句或者单词中包含val(不拆分)就会匹配)
E[attr^=val]	选择器E匹配的标签具有attr属性并且值为val开头的属性值
E[attr$=val]	选择器E匹配的标签具有attr属性,并且值为val结尾的属性值

注意:

a[class="links"] {}  // 这样匹配不到下面的a标签
a[class="links item"] {}  // 这样可以匹配到下面的标签
<a href="#" class="links item"></a>

结构伪类: CSS3 , 兼容ie9及以上

选择器	功能描述
E:first-child	父元素中的第一个子元素E被选中; E:nth-child(1)等同
E:last-child	父元素中的最后一个子元素E被选中; E:nth-last-child(1)等同
E:root	选择器匹配元素E所在文档的根元素. 在HTML文档中,根元素始终是HTML
E>F:nth-child(n)	父元素E中第n个F子元素被选择器选中; 如果第n个不是F选择器, 则不选;
E>F:nth-last-child(n)	父元素E中倒数第n个F子元素被选择器选中; 如果倒数第n个不是F选择器, 则不选
E:nth-of-type(n)	父元素中的子元素E具有指定类型(属性)的第n个E元素
E:nth-of-type(n)	父元素中的子元素E具有指定类型(属性)的第n个E元素
E:first-of-type	父元素中的子元素E具有指定类型的第一个E元素, 与E:nth-of-tyep(1)等同
E:last-of-type	父元素中的子元素E具有制定类型的最后一个E元素, 与E:nth-last-of-type(1)等同
E:only-child	父元素中只有一个子标签, 该字标签匹配
E:only-of-type	父元素中只有一个同类型的子元素, 且该子元素匹配E元素
E:empty	选择器没有子元素的元素, 而且该元素也不包含任何文本节点

n是什么?

:nth-child(n) 或 :nth-last-child(n) 先确定第n个子元素, 然后根据筛选出来的标签和类型(选择器)进行比对
:nth-of-type(n) 或 :nth-of-type(n) 先筛选类型, 然后根据筛选出来的类型进行n值选择
括号里面直接写n, 那么就会选中父标签中指定的所有子标签
2n = event、2n+1 = odd、n+5第五个子元素开始、-n+5第一个到第五个

否定伪类: CSS3、兼容ie9及以上

选择器	功能描述
E:not(F)	E元素中F进行选择, 然后排除所选择的E元素

注意: F可以是一个伪类选择器或者属性选择器, 先E:F进行选择, 然后not把伪类或者属性选择器取反就是

动态伪类: CSS早就有

选择器	类型	功能描述	兼容性
E:link	链接伪类选择器	E元素超链接未被访问(锚点链接上)	全部兼容
E:visited	链接伪类选择器	E元素超链接被访问(锚点链接上)	全部兼容
E:active	用户行为伪类选择器	E元素被激活(锚点链接与按钮上)	ie8及以上
E:hover	用户行为伪类选择器	E元素被鼠标停留(滑过)激活	全部兼容
E:focus	用户行为伪类选择器	E元素获取焦点	ie8及以上

注意: 锚点伪类的设置必须遵循一个"爱恨原则"LoVe/HAte, 也就是link-visited-hover-active

UI元素状态选择器: 兼容性ie9及以上

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

目标伪类选择器: 兼容ie9及以上

选择器	功能描述
E:target	选择匹配E的所有元素,且匹配元素被相关URL指向

用来匹配页面(文档)的URL中某个标识符(#)的目标元素, 具体来说,URL中的标识符通常会包含一个#号,后面带有标识符的名称, 例如"#contact", ":target"就是用来匹配ID为"contact"的元素. 换种说法, 在web页面中一些URL拥有片段标识符,它由一个井号后跟一个锚点或者元素ID组合而成,可以链接到页面的某个特定的元素

<div id="brand">
    <h1><a href="#brand"></a></h1>
</div>
<!--维基百科用来高亮显示脚注-->
<!--
手风琴效果也可以做出来
高亮显示区块: http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
从相互层叠的盒容器或图片中突出显示其中一项: http://virtuelvis.com/gallery/css3/target/interface.html
tabs: http://css-tricks.com/css3-tabs
幻灯片效果: http://designmodo.com/css3-tabs
灯箱效果: http://www.decodize.com/demos/CSS3-target-pseudo-class/gallery.html
相册效果: http://www.ie7nomore.com/fun/scroll
-->

语言伪类选择器: 兼容性IE8及以上

选择器	功能描述
E:lang(language)	表示匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language

匹配使用语言伪类选择器来匹配使用语言元素非常有用,特别是多用于多语言版本的网站,其作用更加明显. 可以根据不同的语言版本设置不同的页面字体风格

<html lang="zh-cn">
<html lang="en-US">
<html lang="fr">

伪元素

伪元素	描述
::first-letter	选择文本块第一个字母,除非在同一行中包含一些其他的元素, 通常用于给文本添加排版细节
::first-line	也是用来文本排版方面, 但是针对第一行
::before	在父选择器上加上该伪元素, 子元素最前面添加内容,内容取决于content的属性值,生成的内容不会成为dom一部分
::after	和上面一样, 只不过是在父元素里最后位置添加内容
::selection	突出显示文本,默认情况下匹配的文本是深蓝色,白色字体; ie仅ie9支持, firefox需要加上私有前缀-moz, webkit内核浏览器都支持

2. 样式顺序

位置属性(position, top, right, z-index, display, ....)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, ...)
背景(background, border, ...)
CSS3