首页 > 程序开发 > web前端 > HTML/CSS >

【CSS】—CSS选择器种类和使用方法

2017-09-09

【CSS】—CSS选择器种类和使用方法。CSS选择器:CSS选择器可以让css对HTML页面中的元素实现一对一、一对多或者多对一的样式匹配。CSS选择器是CSS中很重要的知识点,能灵活运用CSS选择器非常具有难度,下面对于CSS选择器的使用说明倾向于归类总结的方式,同时会附上相应例子

CSS选择器

CSS选择器可以让css对HTML页面中的元素实现一对一、一对多或者多对一的样式匹配。CSS选择器是CSS中很重要的知识点,能灵活运用CSS选择器非常具有难度,下面对于CSS选择器的使用说明倾向于归类总结的方式,同时会附上相应例子。下面的CSS选择器概括图和相应类别来源于网上,如有遗漏,敬请谅解。

\

例子还没写完。。。。搞好了会补上....

基本选择器 类型 功能描述
* 通配选择器 选择HTML文档中所有元素。
E 元素选择器 选择HTML文档中指定类型的元素。
#id ID选择器 选择指定ID属性值为"id"的任意类型元素。
.class 类选择器 选择指定class属性值为“class”的任意类型元素,可指定多个。
selector1、selectorN 群组选择器 将每一个选择器匹配的元素集合并
层次选择器 类型 功能描述
E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E > F 子选择器 选择匹配的F元素,且匹配的F元素是E元素的子元素
E + F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
E ~ F 通用选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

动态伪类选择器 类型 功能描述
E:link 链接伪类选择器 选择匹配的E元素,且匹配元素被定义了超链接并未被访问过。常用于超链接
E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于超链接
E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮。
E:hover 用户行为选择器 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素,而且匹配元素获取焦点
结构伪类选择器 功能描述
E:first-child 选择属于父元素的第一个子元素的每个 元素。
E:last-child 选择属于父元素的最后一个子元素的每个 元素。
E:root 匹配元素E所在文档的根元素。在HTML中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 匹配父元素E的第n个子元素F。n可以是整数(1,2,3)、关键字(even,odd),n值起始值为1,而不是0。
E F:nth-last-child(n) 匹配父元素E的倒数第n个子元素F。
E:nth-of-type(n) 匹配父元素内具有指定类型的第n个E元素。
E:nth-last-of-type(n) 匹配父元素内具有指定类型的倒数第n个E元素。
E:first-of-type 匹配父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同。
E:last-of-type 匹配父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同。
E:only-child 匹配父元素只包含一个子元素,且该子元素匹配E元素。
E:only-of-type 匹配父元素只包含一个同类型子元素,且该子元素匹配E元素。
E:empty 匹配没有子元素的E元素,而且该元素也不包含任何文本节点。
目标伪类选择器 功能描述
E:target 选择匹配相关URL指向的E元素。



否定伪类选择器 功能描述
E:not(F) 匹配所有除元素F之外的E元素。
属性选择器 功能描述
[attr] 带有attr属性的所有元素
[attr=value] 带有attr="value"属性的所有元素
[attr~=value] 在attr属性值列表中,其中包含了一个value值的元素
[attr|=value] attr属性值是“value”,或以"value-"开头的所有元素
[attr^=value] attr属性的属性值以value开头的元素
[attr$=value] attr属性的属性值以“value”作为结尾的元素
E[attr] 匹配拥有attr属性的E元素。前面元素使用如需指定E元素,也按照此方式。



UI元素状态伪类选择器 功能描述
E:checked 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 匹配所有启用的表单元素
E:disabled 匹配所有禁用的表单元素
E:focus 指定元素获得光标焦点时使用的样式
E:read-write 匹配E元素处于非只读状态时
E:read-only 匹配E元素处于只读状态时
E:valid 匹配E元素诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式
E:invalid 匹配E元素诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式
E:required 选择指定允许使用required属性并已使用该属性的input元素、select元素以及textarea元素的样式
E:optional 选择指定允许使用required属性但未指定该属性的input元素、select元素以及textarea元素的样式
E::selection 指定E元素中被选择时网页文本的显示效果。

相关文章
最新文章
热点推荐