当前位置: 首页 > Web前端 > CSS

CSS3中的新选择器是什么?(属性、结构伪类、伪元素选择器)

时间:2023-03-30 18:20:38 CSS

在css3提供的新选择器之前,需要使用id或者class来选择一个元素。css3中新的选择器可以更加灵活的选择需要的元素,那么CSS3提供了哪些有用的选择器呢?第一个是属性选择器。我们可以使用属性选择器来选择同一标签/类中具有相同属性的元素,而无需添加额外的类或ID。比如需要在input标签中选择value属性的内容,可以使用如下方法//cssinput[value]{color:#333;}//html属性选择器还有如下匹配规则(E表示选择器,att表示属性值,val表示匹配的内容)选择器E[att]EelementwithattattributeE[att=val]一个EelementE[att^=val]withattattributeandavalueofval]EelementE[att$=val]anEelementwithattattributeandavaluebeginningwithvalE[att$=val]anEelementE[withanattattributeandavalueendingwithvalatt*=val]TheEelementwithattattributeandvaluecontainingval选择类型为password的元素input标签中//cssinput[type=password]{color:#000}//html选择div标签中class以movie开头的元素//cssdiv[class^=movie]{color:brown}//html天空之城

龙猫
起风了
武林外传
根据以上五种属性选择规则,可以自由选择具有一定特征的元素,那又怎样如果此时我需要选择的元素没有单独的属性。比如我想选中一个列表中的奇数和偶数元素,分别设置不同的背景色。这时候就需要出现一个结构化的伪类选择器。结构伪类选择器可以通过下标选择指定项,比如第一项:first-child,最后一项:last-child,奇数项:nth-??child(even),偶数项:nth-child(odd),第一个任意项:nth-??child(n)拿上面的选择器做个演示//html//cssul:first-child{color:brown//选择ul的第一个,设置子元素的字体颜色为棕色}ul:last-child{text-decoration:underline;//选择ul的最后一个子元素并设置下划线}ul:nth-child(even){font-weight:bold;//selectul的偶数个子元素设置字体为粗体(下标从1开始)}可以看出,上面的每一个伪类选择器都没有直接连接到前面的选择器,而是有一个空间,这意味着什么意思?以:first-child为例,:last-child和:nth-child是类似的原理ul:first-child表示选择ul中的第一个子元素ul:first-child表示选择下面的第一个ul元素对于ul:first-child,如果我们需要验证子元素的selector属性,希望选择ul中的第一个子元素,并且是li,那么我们可以这样定义ulli:first-child但是如果第一个元素不匹配被选元素,则设置的样式不会生效//cssdivp:first-child{color:brown//先找到div的第一个子元素,发现不是p元素,所以样式不生效}//html
div----千与千寻的鬼魂

p----风在吹

p---龙猫

h6----天空之城
div----魔女宅急便
那么如果我们要选择div下的第一个p元素羊毛布?这时候可以使用:first-of-type//选择div下p元素的第一个子元素divp:first-of-type{color:brown}如果指定的子元素类型不是有限的,所有不同类型的子元素都会被样式化//cssdiv:first-of-type{color:brown}类似于:first-of-type,有如下两种选择器,即:last-of-type(select某类型的最后一个子元素),:nth-of-type(按指定规则选择元素)//cssdiv:first-of-type{color:brown}div:last-of-type{text-indent:10px;}div:nth-of-type(2n+1){text-decoration:underline;}来个表格总结一下以上六种结构伪类型选择器选择器简介备注E:first-childselectthefirstelementoftheEelementchildelementEA:first-child(选择E元素的第一个子元素,子元素为A类型元素)E:last-child选择最后一个子元素EA:last-childofE元素(selectE元素的最后一个和第一个子元素,子元素为A类型元素)E:nth-child(n)选取E元素的指定规则元素,如1等数字,2,3,even(偶数),odd(基数)之类的关键字,n或2n+1之类的表达式EA:nth-child(n)(在E元素中选择一个满足指定规则的子元素,and子元素是A类型的元素E:first-of-type选择E元素中不同类型子元素的第一个EA:first-of-type(选择E元素的子元素为A,A元素中的第一个)E:last-of-type选择E元素中不同类型子元素中的最后一个EA:last-of-type(选择E元素中的子元素为A,A元素中的最后一个)E:nth-of-type(n)selectE元素的not同类型E的指定规则A:nth-of-type(选择E元素的子元素为A,A元素的指定规则)上面的属性选择器和结构伪类选择器都是操作元素本身,那么nextselection选择器很神奇,它会添加一个新的不存在的元素,并进行操作,来看看伪元素选择器伪元素选择器有两种,::before,在元素前面加一个内联元素,::after,在元素后面加一个内联元素,需要加两个冒号,为了兼容,也可以只写一个冒号设置伪元素,必填属性为content,其他属性可以根据自己的需要设置。它有以下几种常见的用法,添加一个小图标,比如一个点,箭头实现代码如下//cssdiv{position:relative;}div::after{position:absolute;顶部:7px;左:70px;内容:'';显示:块;宽度:7px;高度:7px;border-right:1pxsolid#333;border-top:1pxsolid#333;transform:rotate(45deg)}//html
Seemore
或者设置鼠标滑动后添加遮罩层,效果如下实现代码如下//cssdiv{position:relative;宽度:200px;高度:200px;margin-right:60px;}img{宽度:100%;高度:100%;}div::after{显示:无;位置:绝对;顶部:0;左:0;内容:'';宽度:100%;高度:100%;background:url(./src/broadcast.png)rgba(0,0,0,.5)centercenterno-repeat}div:hover::after{display:block;}//html
css3添加的上述选择器可以减少html的结构,更灵活的获取需要的元素