之前学CSS和jQuery的时候做过一点CSS选择器的笔记。现在拿出来再看一遍,发现又忘记了不少。于是决定把它贴出来,方便以后查阅。

参考地址:

CSS选择器分类:http://www.w3.org/TR/css3-selectors/

CSS选择器的浏览器支持:http://labs.qianduan.net/css-selector/

选择器种类

一. 基本选择器

选择器 描述 CSS版本
* 选择全部元素 2
E 选择全部为E的元素 1
E#myid id选择器,选择id为myid的E元素 1
E.warning class选择器,选择class为warning的元素 1

二. 属性选择器

选择器 描述 CSS版本
E[foo] 选择含有foo属性的元素 2
E[foo="bar"] 选择foo属性为“bar”的元素字符串 2
E[foo~="bar"] 选择属性foo的值包含单词“bar”的元素 2
E[foo^="bar"] 选择属性foo的值以“bar”字符串开头的元素 3
E[foo$="bar"] 选择属性foo的值以“bar”字符串结尾的元素 3
E[foo*="bar"] 选择属性foo的值包含“bar”的元素 3
E[foo\ ="en"] 选择属性foo的值以连字符分隔并且以“en”开头的所有元素 2

三. 伪类选择器

选择器 描述 CSS版本
E:root 选择位于文档根元素的E元素 3
E:first-child 选择其父元素中第1个为E的子元素 2
E:last-child 选择其父元素中最后一个为E的子元素 3
E:nth-child(n) 选择其父元素中第n个为E的子元素 3
E:nth-last-child(n) 选择其父元素中倒数第n个为E的子元素 3
E:only-child 选择其父元素中仅有1个为E的子元素 3
E:first-of-type 选择第1个与E类型相同的E的兄弟元素 3
E:last-of-type 选择最后一个与E类型相同的E的兄弟元素 3
E:nth-of-type(n) 选择第n个与E类型相同的E的兄弟元素 3
E:nth-last-of-type(n) 选择倒数第n个与E类型相同的E的兄弟元素 3
E:only-of-type 选择仅有1个与E类型相同的E的兄弟元素 3
E:link 选择未被访问的E元素 1
E:visited 选择已被访问的E元素 1
E:active 选择活动的E元素 1/2
E:hover 选择鼠标指针位于其上的元素 1/2
E:target 选择相关URL指向的E元素(URL链接为#E) 3
E:lang(fr) 选择带有fr开头的lang属性值的E元素 3
E:focus 选择获得焦点的元素 1/2
E:enabled 选择启动的父元素 2
E:disabled 选择不可用的父元素 3
E:checked 选择被选中的父元素 3
E:not(s) 选择除了包含s的全部E元素 3
E:empty 选择没有子元素的E元素 3

四. 伪元素选择器

选择器 描述 CSS版本
E::first-line 选择E元素的首字母 1
E::first-letter 选择E元素的首行 1
E::before 在E元素前插入内容 2
E::after 在E元素后插入内容 2

五. 组合选择器

选择器 描述 CSS版本
E F 后代元素选择器,选择父元素为E的F元素 1
E > F 子元素选择器,选择父元素为E的F元素 2
E + F 兄弟元素选择器,选择紧跟E元素后面的F元素 2
E ~ F 兄弟元素选择器,选择在E元素后面的所有F元素 3

样式的层叠重要度次序

如果同一个元素同时具有两个或更多的规则,层叠为每个规则分配一个重要度。 层叠的重要度次序如下(从高到低):

标有!important的用户样式;

标有!important的开发者样式;

开发者样式;

用户样式;

浏览器/用户代理应用的样式;

选择器的优先级

选择器的越特殊,优先级越高。

为了计算规则的特殊性,给每种选择器都分配一个数字值,然后将规则的每个选择器的值加在一起,计算出规则的特殊性。

选择器的特殊性分为4个成分等级:a, b, c和d。

如果样式是行内样式,a = 1;

ID选择器,b = 1;

类、伪类和属性选择器,c = 1;

类型选择器和伪元素选择器,d = 1;

兼容性

CSS选择器的兼容性可参考这里:
CSS选择器的浏览器支持http://labs.qianduan.net/css-selector/
css1

css2.0

css3

备注:图片转载自《CSS选择器的浏览器支持

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/300