搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > 帝国教程
    HTML5/CSS3:用css选择器给你要的第几个元素添加不同样式
        发布时间:2015-11-22 23:52:05    发布作者:admin

    很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢,下面今天yecha来讲解咯!RGX三九网站目录

    用css选择器给你要的第几个元素添加不同样式RGX三九网站目录

    用css选择器给你要的第几个元素添加不同样式RGX三九网站目录

    我们写的html代码 实例如下:RGX三九网站目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>

    效果如图:RGX三九网站目录

    用css选择器给你要的第几个元素添加不同样式RGX三九网站目录

    下面我们来了解一下css选择器里面的几个RGX三九网站目录

    :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代码如下RGX三九网站目录

    1
    2
    3
    <style>

    .list li:nth-child(4n){ border-bottom:1px dashed #ccc;}RGX三九网站目录

     /*4n就是4的倍数都加这个样式*/RGX三九网站目录

    </style>

    则效果如图!RGX三九网站目录

    用css选择器给你要的第几个元素添加不同样式RGX三九网站目录


    RGX三九网站目录

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

    1
    2
    3
    <style>

    .list li:first-child{ border-bottom:1px dashed #ccc;}RGX三九网站目录

     /*first-child就是第一个元素*/RGX三九网站目录

    </style>

    用css选择器给你要的第几个元素添加不同样式RGX三九网站目录

    其他用法也是一样的! 大家需要的就学习一下吧RGX三九网站目录

    RGX三九网站目录

    最新资讯
    最新收录
    热门资讯