新零售商城 快打包
当前位置:首页 > 教程中心 > DIV+CSS教程 > HTML5+CSS3

用css3选择器给你要的第几个元素添加不同样式方法

所属栏目:HTML5+CSS3 时间:2014-08-15 来源:网络 作者:yecha 点击:

很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢!

用css选择器给你要的第几个元素添加不同样式

用css选择器给你要的第几个元素添加不同样式

我们写的html代码 实例如下:

<ul class="list">
    <li><a href="#">1·这里是一流资源网信息标题</a></li>
    <li><a href="#">2·这里是一流资源网信息标题</a></li>
    <li><a href="#">3·这里是一流资源网信息标题</a></li>
    <li><a href="#">4·这里是一流资源网信息标题</a></li>
    <li><a href="#">5·这里是一流资源网信息标题</a></li>
    <li><a href="#">6·这里是一流资源网信息标题</a></li>
    <li><a href="#">7·这里是一流资源网信息标题</a></li>
    <li><a href="#">8·这里是一流资源网信息标题</a></li>
</ul>

效果如图:

用css选择器给你要的第几个元素添加不同样式

下面我们来了解一下css选择器里面的几个

:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3
:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3
:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。3
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。

我们可以使用 :nth-child(n)  来自动判断第4个
css代码如下

<style>
.list li:nth-child(4n){ border-bottom:1px dashed #ccc;} /*4n就是4的倍数都加这个样式*/
</style>

则效果如图!

用css选择器给你要的第几个元素添加不同样式


当然,上面我介绍了一堆选择器,使用方法都差不多,例如 要给第一句加样式,则可以这样

<style>
.list li:first-child{ border-bottom:1px dashed #ccc;} /*first-child就是第一个元素*/
</style>

用css选择器给你要的第几个元素添加不同样式

其他用法也是一样的! 大家需要的就学习一下吧 下面给大家个演示!


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: