首页 > 其他分享 >CSS3选择器的总结

CSS3选择器的总结

时间:2022-10-27 20:33:48浏览次数:76  
标签:CSS3 总结 匹配 attr 伪类 元素 选择 选择器


CSS3选择器分类

CSS3选择器的总结_html


通过基本选择器就可以确定HTML树形结构中大多数的DOM元素节点。

选择器

类型

说明

*

通配选择器

选择文档中所有的HTMl元素

E

元素选择器

选择指定类型的HTMl元素

#ID

ID选择器

选择指定ID属性值的元素

.class

类选择器

选择指定class属性的元素

selector1,selectorN

群组选择器

把每一个选择器匹配的元素集合并

层次选择器,常用的选择器

选择器

类型

说明

E F

后代选择器

选择匹配F的元素,F被包含在E里面

E>F

子选择

选择F元素,并且F元素是E元素的子元素

E+F

相邻兄弟选择器

选择F元素,并且F元素紧跟在E元素的后面

E~F

通用兄弟选择器

选择F元素,并且位于匹配E元素后的所有匹配F元素

动态伪类选择器:动态伪类并不存在与HTML中,只有在用户和网站交互时才会体现出来!

选择器

类型

说明

E:link

链接伪类选择器

选择匹配E的元素,并且匹配元素定义分超链接未被访问过,通常用在链接锚点上。

E:visited

链接伪类选择器

选择匹配E的元素,并且匹配元素定义分超链接已经被访问过,通常用在链接锚点上。

E:active

用户行为伪类选择器

选择匹配元素的E元素上,并且匹配元素被激活。常用于锚点和按钮上

E:hover

用户行为伪类选择器

选择匹配E的元素,并且用户鼠标停留在E元素上。

E:focus

用户行为伪类选择器

选择匹配E的元素,并且匹配的元素获得焦点

目标伪类选择器:“:target”是众多实用的CSS3特性中的一个,用来匹配文档(页面)的URI[插图]中某个标志符的目标元素。

选择器

类型

说明

E:target

目标伪类选择器

选择匹配E的所有元素,并且匹配元素被相关URL指向

语言伪类选择器:语言伪类选择器是根据元素的语言编码匹配元素
使用HTML5,则直接设置文档的语言

<!DOCTYPE HTML>
<html lang="en-US">

语言伪类选择器允许不同的语言定义特殊的规则,一般在多语言版本的网站中用的比较多些
E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language

UI元素状态伪类选择器:UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等,表单中常用的伪类选择器如下:

选择器

类型

说明

E:checked

选中状态选择器

匹配选中的复选框或单选按钮表单元素

E:enabled

启动状态伪类选择器

匹配所有启动的表单元素

E:disabled

不可用状态伪类选择器

匹配所有禁用的表单元素

结构伪类选择器:根据元素在文档树中的某些特性(如相对位置)定位到它们

选择器

说明

E:first-child

父元素的第一个子元素,与E:nth-child(1)相同

E:last-child

父元素的最后一个子元素,与E:nth-last-child(1)相同

E:root

选择匹配元素所在的根元素,在HTML中根元素始终都是html,该选择器与HTML类型选择器匹配的内容相同。

E:nth-child(n)

选择父元素的第N个子元素,N是整数(1,2,3)、关键字(even、odd)、公式(2n+1),n的初始值为1.

E:nth-last-child(n)

选择父元素的倒数第n个子元素

E:nth-of-type(n)

选择父元素内具有指定类型的第n个元素

E:nth-last-of-type(n)

选择父元素内具有指定类型的倒数第n个元素

E:first-of-type

选择父元素内具有指定类型的第一个元素

E:last-of-type

选择父元素内具有指定类型的最后一个元素

E:only-child

选择父元素只包含一个子元素

E:only-of-type

选择父元素只包含一个同类型的子元素

E:empty

选择没有子元素的元素,并且该元素没有任何文本节点

否定伪类选择器:主要用来定位不匹配该选择器的元素

选择器

说明

E:not(F)

匹配所有除元素F外的E元素

伪元素:CSS3中,在以前的基础上增加一个冒号。如:
::first-line 、::first-letter 、::before 、::after 、::selection,双冒号和单冒号主要是用来区分伪类和伪元。两种方式都被各种浏览器支持,
对于IE6~IE只支持单冒号的方式。

::first-letter,用来选择文本块的第一个字母
::first-line,用来匹配元素的第一行文本,应用一些特殊的样式,给文本添加一些细微的区别。
::before和::after,用来插入额外内容的位置,生成的内容不会成为DOM的一部分,
但是和DOM一样可以设置样式。必须要匹配content属性才能生成内容。
::selection,用来匹配突出显示的文本。但是它仅仅接受两个属性:background和color。

属性选择器

选择器

说明

E:[attr]

选择具有某个属性的元素

E:[attr=val]

选择属性为attr并且属性值为val的元素

E:[attr

=val]

E:[attr~=val]

选择匹配元素的某个属性具有一个或多个属性值,多个属性值用逗号隔开,当属性值中有一个艺术性与之匹配,就选中该元素。

E:[attr*=val]

选择属性为attr并且属性值含有val字符串的元素

E:[attr^=val]

选择attr属性值以val开头的所有元素

E:[attr$=val]

选择attr属性值以val结尾的所有元素

以上是常见的选择器,若有误差,请留言哦 !!!


标签:CSS3,总结,匹配,attr,伪类,元素,选择,选择器
From: https://blog.51cto.com/u_12344418/5801933

相关文章