css伪类选择器first-chlid、last-child、nth-child()

2020年6月22日 评论 19,853

css伪类选择器first-chlid、last-child、nth-child()如何使用,有什么区别呢?

:first-child{}选择器是匹配父元素的第一个子元素的元素,

:last-child{}选择器是匹配父元素的最后一个子元素的元素,

:nth-child(n){}选择器是匹配某个父元素的一个或多个子元素的元素。

其中nth-child(n){}的n可以是一个数字,一个关键字,或者一个公式。
当n为整数值时,n的起始值为1,当n为表达式时,n的起始值为0。实现的代码以及效果如下:

html部分

<div class="pay-button-box"> <div class="pay-item" data-id="1">支付方式1</div> <div class="pay-item" data-id="2">支付方式2</div><div class="pay-item" data-id="3">其他支付方式</div> </div>

css部分

<div>.pay-button-box :first-child{color:red;}</div><div>.pay-button-box :nth-child(2){color:green;}</div>

最终效果
css伪类选择器first-chlid、last-child、nth-child()

为登录用户显示不同的 WordPress 菜单 网页前端

为登录用户显示不同的 WordPress 菜单

有的网站需要为未登录用户和登录用户显示不同的菜单,那么该如何实现呢? 可以通过下面的代码实现: 将下面代码添加到当前主题函数模板functions.php中: if( is_user_logged_i...
WordPress如何设置强制登录否则无法查看网站 网页前端

WordPress如何设置强制登录否则无法查看网站

如网站内容只希望注册用户浏览,对其他所有人隐藏,浏览者未登录访问直接跳转到登录注册页面,可以用下面的代码实现。 将下面代码添加到当前主题函数模板functions.php中: 代码一 未登录访问网站直...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: