zl程序教程

您现在的位置是:首页 >  前端

当前栏目

CSS3 选择符

2023-09-11 14:22:55 时间

一、元素选择符

selectordescription
*通配选择符,匹配所有对象
E类型选择符,匹配标签对应的元素
E#myidID选择符,匹配唯一标识符id属性等于myid的E对象
E.myclass类选择符,匹配class属性的值等于myclass的E对象

二、关系选择符

selectordescription
E F包含选择符,选择所有被E元素包含的F元素
E>F子选择符,选择所有作为E元素的子元素F
E+F相邻选择符,仅选择紧贴在E元素之后的一个兄弟元素F
E~F兄弟选择符,选择E元素之后的所有兄弟元素F

三、属性选择符(属性选择符并列相当与and,如E[att1][att2])

selectordescription
E[att]选择具有att属性的E元素
E[att=”val”]选择具有att属性,且值等于val的E元素
E[att~=”val”]选择具有att属性,且值为用空格分隔的单词,其中一个等于val
E[att|=”val”]选择具有att属性,且值以val打头,并用连字符”-“分隔的E元素
E[att^=”val”]选择具有att属性,且值以val开头的E元素
E[att$=”val”]选择具有att属性,且值以val结尾的E元素
E[att*=”val”]选择具有att属性,且值包含val的E元素

四、伪类选择符(一个冒号)

selectordescription
a:link超链接a在未被访问前的样式
a:visited超链接a在已被访问后的样式
E:hover鼠标悬停时的样式
E:active被用户激活(鼠标点击与释放之间)的样式
E:focus成为输入焦点(onfocus事件发生)时的样式
E:lang()匹配使用特殊语言的E元素
E:not(s)匹配不含有s选择符的E元素
E:root匹配文档结构最外层的元素E,HTML中一定是html标签
E:first-child匹配父元素的第一个子元素E
E:last-child匹配父元素的最后一个子元素E
E:only-child匹配父元素仅有的一个子元素E
E:nth-child(n)匹配父元素的第n个子元素E。odd奇数;even偶数;也可以指定索引或使用诸如An+B的表达式(其中A、B为常量,n只能取能让表达式的值大于0的值,A<0表示只取-B/A个)
E:nth-last-child(n)匹配父元素的倒数第n个子元素E
C:first-of-type匹配同类型中的第一个同级兄弟元素E
C:last-of-type匹配同类型中的最后一个同级兄弟元素E
C:only-of-type匹配同类型中的唯一一个同级兄弟元素E
C:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E
C:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E
E:empty匹配没有任何内容的元素E(注释不算内容,空格和空两码事)
E:checked匹配用户界面上处于选中状态的元素E(用于form内inputType为radio与checkbox的元素)
E:enabled匹配用户界面上处于可用状态的元素
E:disabled匹配用户界面上处于禁用状态的元素
E:target当用户被a标签导航到该元素E上时生效(导航到其他地方则又会自动失效)

五、伪对象选择符(两个冒号)

selectordescription
E::first-letter设置对象的第一个字符的样式
E::first-line设置对象的第一行样式
E::before设置在对象内,(依据对象树的逻辑结构)其内容之前,和content属性一起使用
E::after设置在对象内,(依据对象树的逻辑结构)其内容之后,和content属性一起使用
E::selection设置被选中对象的颜色(firefox无效)

注意:JavaScript和jQuery都是从0开始计数的,而CSS3则是从1开始计数。