css选择器总结

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元素。

 
 
 
 
 
原文地址:https://www.cnblogs.com/qduanlu/p/2960357.html