CSS的高级选择器

层次选择

选择器

   

功能描述

E F

后代选择器

选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E>F

子选择器

选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

E~F

通用兄弟选择器

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

结构伪类选择

选择器

功能描述

E:first-child

作为父元素的第一个子元素的元素E

E:last-child

作为父元素的最后一个子元素的元素E

E F:nth-child(n)

选择父级元素E的第n个子元素F,(n可以是123),关键字为evenodd

E:first-of-type

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

E:last-of-type

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

E F:nth-of-type(n)

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

属性选择器

E[attr]

选择匹配具有属性attrE元素

E[attr=val]

选择匹配具有属性attrE元素,并且属性值为val(其中val区分大小写)

E[attr^=val]

选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串

E[attr$=val]

选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串

E[attr*=val]

选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配

猜你喜欢

转载自blog.csdn.net/weixin_42425900/article/details/82228802