利用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 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
党员的自我评价范文
2014/01/02 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
遗失证明范文
2015/06/19 职场文书
2016寒假假期总结
2015/10/10 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript