美图欣赏 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 网络创业 > CSS DIV >

CSS选择器种类和使用方法

2017-09-11 11:02|来源:未知 |作者:dnzg |点击:

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

\

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

   
   
   
器仅支持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元素中被选择时网页文本的显示效果。
 

(责任编辑:dnzg)