css选择器

基本选择器

通配选择器

选择器:*
类型:通配选择器
含义:选择文档中所有的HTML元素

元素选择器

选择器:E
类型:元素选择器
含义:选择指定类型的HTML元素

ID选择器

选择器:#ID
类型:ID选择器
含义:选择指定ID属性值为“ID”的HTML元素

类选择器

选择器:.class
类型:类选择器
含义:选择指定class属性值为“class”的HTML元素

群组选择器

选择器:.selctor1,selector2,...selectorN
类型:群组选择器
含义:将每一个选择器匹配的元素合并到一起

层次选择器

后代选择器

选择器:E F
类型:层次选择器
含义:匹配所有属于E元素后代的F元素

子选择器

选择器:E > F
类型:子选择器
含义:匹配所有E元素的子元素F

相邻兄弟选择器

选择器:E + F
类型:相邻兄弟选择器
含义:匹配所有相邻E元素之后同级元素F

通用选择器

选择器:E ~ F
类型:通用选择器
含义:匹配E元素后的所有符合条件的兄弟元素,不单单是紧邻的兄弟元素。

伪类选择器

E:link链接伪类选择器

选择器:E:link
含义:匹配所有未被点击的链接。

E:visited链接伪类选择器

选择器:E:visited
含义:匹配所有已被点击的链接。

E:active用户行为伪类选择器

选择器:E:active
含义:匹配鼠标已经其上按下、还没有释放的E元素,常用于锚点和按钮上。

E:hover用户行为伪类选择器 ()

选择器:E:hover
含义:匹配鼠标悬停其上的E元素。

E:focus用户行为伪类选择器

选择器:E:focus
含义:匹配获得当前焦点的E元素。

E:target目标伪类选择器

选择器:E:target
含义:匹配文档中特定"id"点击后的效果。
示例:http://htmldog.com/articles/suckerfish/target/example/

E:lang(en)语言伪类选择器

选择器:E:lang(en)
含义:匹配lang属性等于c的E元素。
示例:http://css.doyoe.com/selectors/pseudo-classes/lang(fr).htm

E:checked选中状态伪类选择器

选择器:E:checked
含义:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)。
示例:http://css.doyoe.com/selectors/pseudo-classes/checked.htm

E:enabled启用状态选择器

选择器:E:enabled
含义:匹配用户界面上处于可用状态的元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/enabled.htm

E:disabled不可用状态伪类选择器

选择器:E:disabled
含义:匹配用户界面上处于禁用状态的元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/disabled.htm

E:not(s)否定伪类选择器

选择器:E:not(s)
含义:匹配不含有s选择符的元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/not(s).htm

E:root文档的根元素伪类选择器

选择器:E:not(s)
含义:匹配E元素在文档的根元素。在HTML中,根元素永远是HTML。
示例:http://css.doyoe.com/selectors/pseudo-classes/root.htm

E:first-child伪类选择器

选择器:E:first-child
含义:匹配父元素的第一个子元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/first-child.htm

E:last-child伪类选择器

选择器:E:first-child
含义:匹配父元素的最后一个子元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/last-child.htm

E:only-child伪类选择器

选择器:E:only-child
含义:匹配父元素仅有的一个子元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/only-child.htm

E:nth-child(n)伪类选择器

选择器:E:nth-child(n)
含义:匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
示例:http://css.doyoe.com/selectors/pseudo-classes/nth-child(n).htm

E:nth-last-child(n)伪类选择器

选择器:E:nth-last-child(n)
含义:匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
示例:http://css.doyoe.com/selectors/pseudo-classes/nth-last-child(n).htm

E:first-of-type伪类选择器

选择器:E:first-of-type
含义:匹配同类型中的第一个同级兄弟元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/first-of-type.htm

E:last-of-type伪类选择器

选择器:E:last-of-type
含义:匹配同类型中的最后一个同级兄弟元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/last-of-type.htm

E:only-of-type伪类选择器

选择器:E:only-of-type
含义:匹配同类型中的唯一的一个同级兄弟元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/only-of-type.htm

E:nth-of-type(n)伪类选择器

选择器:E:nth-of-type(n)
含义:匹配同类型中的第n个同级兄弟元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/nth-of-type(n).htm

E:nth-last-of-type(n)伪类选择器

选择器:E:nth-last-of-type(n)
含义:匹配同类型中的倒数第n个同级兄弟元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/nth-last-of-type(n).htm

E:empty伪类选择器

选择器:E:empty
含义:匹配没有任何子元素(包括text节点)的元素E。
示例:http://css.doyoe.com/selectors/pseudo-classes/empty.htm

伪元素选择器

E:first-letter | E::first-letter选择器

选择器:E:first-letter | E::first-letter
含义:设置对象内的第一个字符的样式。
示例:http://css.doyoe.com/selectors/pseudo-element/first-letter.htm

E:first-line | E::first-line选择器

选择器:E:first-line | E::first-line
含义:设置对象内的第一行的样式。
示例:http://css.doyoe.com/selectors/pseudo-element/first-line.htm

E:before | E::before选择器

选择器:E:before | E::before
含义:设置对象内的第一行的样式。
示例:http://css.doyoe.com/selectors/pseudo-element/first-line.htm

E:after | E::after选择器

选择器:E:after | E::after
含义:设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性。
示例:http://css.doyoe.com/selectors/pseudo-element/after.htm

E::placeholder选择器

选择器:E:after | E::after
含义:设置对象文字占位符的样式
示例:http://css.doyoe.com/selectors/pseudo-element/placeholder.htm

E::selection选择器

选择器:E::selection
含义:设置对象被选择时的样式。
示例:http://css.doyoe.com/selectors/pseudo-element/selection.htm

属性选择器

E[attr]属性选择器

选择器:E[attr]
含义:选择具有attr属性的E元素。
示例:http://css.doyoe.com/selectors/attribute/att.htm

E[att="val"]属性选择器

选择器:E[att="val"]
含义:选择具有att属性且属性值等于val的E元素。
示例:http://css.doyoe.com/selectors/attribute/att2.htm

E[att~="val"]属性选择器

选择器:E[att~="val"]
含义:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
示例:http://css.doyoe.com/selectors/attribute/att3.htm

E[att^="val"]属性选择器

选择器:E[att^="val"]
含义:选择具有att属性且属性值为以val开头的字符串的E元素。
示例:http://css.doyoe.com/selectors/attribute/att4.htm

E[att$="val"]属性选择器

选择器:E[att$="val"]
含义:选择具有att属性且属性值为以val结尾的字符串的E元素。
示例:http://css.doyoe.com/selectors/attribute/att5.htm

E[att*="val"]属性选择器

选择器:E[att*="val"]
含义:选择具有att属性且属性值为包含val的字符串的E元素。
示例:http://css.doyoe.com/selectors/attribute/att6.htm

E[att|="val"]属性选择器

选择器:E[att|="val"]
含义:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
示例:http://css.doyoe.com/selectors/attribute/att7.htm

参考链接:

CSS选择器的浏览器支持 | 兼容性
CSS选择器笔记
CSS参考手册_web前端开发参考手册系列

原文地址:https://www.cnblogs.com/lyswwb/p/4637665.html