利用css3如何设置没有上下边的列表间隔线


Posted in HTML / CSS onJuly 03, 2017

本文主要介绍了关于利用css3如何设置没有上下边的列表间隔线的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

效果图:

利用css3如何设置没有上下边的列表间隔线
 

方法一:通用兄弟选择器( ~ )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
        ul {margin: 0; padding: 0;}
        li { list-style: none; height: 50px; line-height: 50px;}
        li~li {border-top: 1px solid #000;} 
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

li~li {...} 中的 ~ 符号称为通用兄弟选择器,匹配P元素之后的P元素,所以第一个P元素不会匹配到。

方法二:伪类选择器( :first-of-type / :last-of-type )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
        ul {margin: 0; padding: 0;}
        li { border-top: 1px solid #000; list-style: none; height: 50px; line-height: 50px;}
        li:first-of-type {border-top: none;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

首先将所有 li 设置 border-top,然后用 :first-of-type 查找到第一个 li ,取消border-top。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 #HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 #HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
You might like
php操作csv文件代码实例汇总
2014/09/22 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
xmlHTTP实例
2006/10/24 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python实现自动重启本程序的方法
2015/07/09 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python中update的基本使用方法详解
2019/07/17 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python开头的coding设置方法
2019/08/08 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
优秀教师先进事迹
2014/01/22 职场文书
新年联欢会主持词
2014/03/27 职场文书
售后服务承诺书模板
2014/05/21 职场文书
银行金融服务方案
2014/06/11 职场文书
建筑结构施工求职信
2014/07/11 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
英文产品推荐信
2015/03/27 职场文书
nginx 配置缓存
2022/05/11 Servers