css选择器
1.*:通用选择器,匹配所有元素。
2.E:元素选择器,匹配所有E标签的元素。
3.#idName:id选择器,匹配id是idName的元素。
4..className:类选择器,匹配class是className的元素。
5.E,F:多元素选择器,匹配所有E、F标签的元素。
6.E>F:子元素选择器,匹配所有E元素的子元素F。
7.E F:后代选择器,匹配所有属于E元素的后代F元素。
8.E+F:相邻兄弟选择器,匹配所有紧随元素E之后的同级元素F,两者拥有相同的父元素。
9.E ~ F:匹配任何在E元素之后的同级F元素。(css3)
10.伪元素:
E:first-line:用于向文本的首行设置特殊样式。
E:first-letter: 用于向文本的首字母设置特殊样式。
E:before:可以在元素E的内容前面插入新内容。(css2添加,其中IE8自身及以上都支持,IE7及以下就不支持)
E:after:可以在元素E的内容之后插入新内容。(css2添加,其中IE8自身及以上都支持,IE7及以下就不支持)
11.css2属性选择器
E[att]:匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
E[att=val]:匹配所有att属性等于“val”的E元素。
E[att~=val]:匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素。
E[att|=val]:匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等。
同时还能类似E[att][att]这样写,可以拼接多个属性选择器。
12.css3属性选择器
E[att^="val"]:匹配属性att的值以”val”开头的元素。
E[att$="val"]:匹配属性att的值以”val”结尾的元素。
E[att*=”val”]:匹配属性att的值包含”val”字符串的元素。
13.伪类:
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited
{color: #00FF00} /* 已访问的链接 */
a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */
a:active
{color: #0000FF} /* 选定的链接 */
E:first-child:匹配父元素中第一个E元素。(css2添加,IE7开始支持)
E:lang:向带有指定 lang 属性的元素E添加样式。(css2添加)
E:focus:匹配获得当前焦点的E元素(css2添加,其中IE8自身及以上都支持,IE7及以下就不支持)。
14:css3伪类
E:enabled:匹配表单中激活的元素。
E:disabled:匹配表单中没有激活的元素。
E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素。
E::selection:匹配用户当前选中的元素。
E:root:匹配文档的根元素,对于HTML文档,就是HTML元素。
E:nth-child(n):匹配父元素中的第n个子元素E,第一个编号为1。
E:nth-last-child(n):匹配父元素中的倒数第n个子元素E,第一个编号为1。
E:nth-of-type(n):与:nth-child()作用类似,但是仅匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n):与:nth-last-child() 作用类似,但是仅匹配父元素中的倒数第n个结构子元素E。
E:last-child:匹配父元素中最后一个E元素,等同于:nth-last-child(1)。
E:first-of-type:匹配同级兄弟元素中的第一个E元素,等同于:nth-of-type(1)。
E:last-of-type:匹配父元素下使用同种标签的最后一个子元素E,等同于:nth-last-of-type(1)。
E:only-child:匹配属于父元素中唯一子元素的E,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
E:only-of-type:匹配属于同类型中唯一兄弟元素的E,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
E:empty:匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素。
E:not(s):匹配不符合当前选择器的任何元素。
E:target:匹配相关URL指向的E元素。