博客列表 >CSS选择器

CSS选择器

魔魔
魔魔原创
2020年04月10日 14:10:49969浏览

总结

CSS选择器共分为简单选择器、上下文选择器、伪类选择器、其他选择器四大类。每类选择器下面都有多种不同类型的选择器。简单选择器常用的选择器为元素选择器、类选择器、ID选择器,比如input {}; .favorite {} ; #idea {}。上下文选择器根据元素在html文档中所处的位置来判定类型,一个元素通常四种身份,是其他元素的祖先、父、子、后代元素。上下文选择器也有四种类型,后代选择器,例如p span {},两个元素之间用空格表示选中p元素的所有后代元素。父子选择器,例如ul > li {},两个元素之间用大于号表示选中当前元素的所有子元素。同级相邻选择器,例如 li.blue + li,两个元素之间用加号表示选择拥有同一个父级元素且相位置邻的元素。同级所有选择器,例如 h2 ~ h6,两个元素之间用波浪线连接表示选中拥有同一个父级的后续所有元素。伪类选择,级别属于属性选择器,优先级大于元素选择器。有结构性伪类和表单伪类两种,其中结构性伪类又分为不分组匹配和分组匹配伪类选择器,它们主要是针对元素的子元素位置进行选择的选择器,不分组匹配选择共有5种类型,:first-child、:last-child、:only-child、:nth-child(n)、:nth-last-child(n)。第一种:first-chile与第四种中的:nth-child(1)相等,只是书写模式不一样,都是选择第一个子元素,:last-child,选择最后一个子元素,:only-child选择唯一的子元素,:nth-child(n)中,n代表的是子元素的序号,通常指第几个子元素,表达式中的n是从0开始计算的,并且必须写在前面。比如:nth-last-child(-n+5),表示选择从倒数第5个子元素开始之前的所有元素,依次是倒数第5、4、3、2、1四个子元素。分组匹配选择器只是在不分组匹配选择器上的细分而已,通过分组选择各组的子元素,通常有:first-of-type、:last-of-type、:only-of-type、:nth-of-type()、:nth-last-of-type(),以上选择器表示,选择各组中第一个子元素、最后一个子元素、唯一子元素、第n个子元素、倒数第n个子元素,n的表达式跟不分组匹配一样。表达伪类选择器主要根据表单控件状态特征进行选择,比如:disable,表示选择拥有禁用属性的控件,:requirde,选择必选属性的控件等等。其他伪类,包括a标签中的5种伪类样式,最常用的还是:hover,鼠标悬停效果,:root,根元素html上的伪类,:not()排除某个元素的伪类选择器。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议