css3怎么排除第一个,css怎么排除第一个子元素

css排除第一个子元素的方法:1、通过使用伪类选择器“:not”实现排除;2、通过使用“nth-of-type”或者“nth-child”实现排除;3、通过使用“+”或者“~”兄弟选择符实现获取排除第一个之外的子元素。

f44b7d941e53562f0ae1e784b972dbbd.png

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

css获取除第一个之外的子元素

在前端页面开发中,需要使用css来选择除了第一个之外的子元素,例如希望每个span之间能间隔一定的距离,单不能给每个span设置margin-left,这样会导致第一个span的前面有间距,影响排版。下面就来讲解实现css获取除第一个之外的子元素的多种方法。

效果如下:

90c3ab965e281b9bc0eab93cc8cf55d8.png

设计坞https://www.wode007.com/sites/73738.html

基本结构如下:

.dom div{

float: left;

height: 150px;

line-height: 150px;

width: 150px;

margin: 20px;

background: #ccc;

text-align: center;

color:#fff;

}

1
2
3

方法1:使用伪类选择器:not

.dom div:not(:first-child){

background:red;

}

说明:

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

方法2:使用nth-of-type或者nth-child

.dom div:nth-of-type(n+2){

background:red;

}

或者:

.dom div:nth-child(n+2){

background:red;

}

说明:

n是从0开始的,那么n+2自然就是从第2个元素开始了,同理如果选中单数元素那么就是2n+1,如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

【推荐学习:css视频教程】

方法3:巧妙使用+或者~兄弟选择符

.dom div+div{

background:red;

}

或者:

.dom div~div{

background:red;

}

说明:

+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

~ 选择器 :作用是查找某一个指定元素的后面的所有兄弟结点。

由于都是div元素,第一个元素没有兄弟元素,所以就能获取除第一个之外的子元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/343602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Gradle中为JPMS构建Java 6-8库

通过提供Java 9 module-info.class来了解如何使用Gradle构建支持JPMS( Java平台模块系统 )的Java 6-8库。 介绍 如果您需要JPMS本身的介绍,请查看此概述 。 这篇文章主要针对Java库维护者。 任何此类维护者都必须选择要针对的JDK&#xff…

mysql5.7.24怎么打开_mysql-5.7.24-winx64安装教程

5.2 配置环境右击此电脑-->点击属性-->点击高级系统设置-->点击环境变量(N)...-->点击系统变量(S)下面的新建-->1).第一行写MYSQL_HOME第二行写C:\Program Files\mysql-5.7.17-win322).点击系统变量中的path点击新建-->写入%MYSQL_HOME$\bin5.3进入cmd命令行…

如何解决光端机的开关量问题?

光端机开关量问题可以说是光端机的常见问题之一,对监控效果有比较大的影响,那么,我们应该如何解决光端机的开关量问题呢?接下来就由杭州飞畅科技的小编来为大家详细讲解下吧,感兴趣的朋友就一起来了解下! …

qq群发信息显示服务器检测到,关于如何突破QQ群发消息屏蔽或限制经验总结

文章导读:本文主要介绍关于如何突破QQ群发消息屏蔽或限制经验总结 ,包括:WebQQ发送消息很多人反映说消息收不到啊,发布多久就屏蔽了。其实我还是那句老话。当你短时间在同一个IP段之内发送这么多消息,明眼人都知道你这…

mysql 授权访问_windows开启3306端口并用可视化工具访问远程mysql(授权访问)

开启 MySQL 的远程登陆帐号有两大步:1、确定服务器上的防火墙没有阻止 3306 端口。MySQL 默认的端口是 3306 ,需要确定防火墙没有阻止 3306 端口,否则远程是无法通过 3306 端口连接到 MySQL 的。如果您在安装 MySQL 时指定了其他端口&#xf…

微信小程序服务器请求post,微信小程序使用HTTP请求_绕过HTTPS_云函数 request-promise get、post...

request-promise GET 请求1、云函数中> 云函数的console.log();只能在云函数的日志中查看,不会打印到控制台上,以为云函数不是本地// 云函数入口文件const cloud require(wx-server-sdk)//引入request-promise用于做网络请求var rp require(request-promise);c…

什么是电视光端机?电视光端机是怎么分类的?

现如今,随着国内通信网络的发展,电视光端机应用的监控范围也越来越广。在高速公路、银行、电力、电信等的监控领域都要求对视频信号进行远程的传输,目前主要的解决方法是利用光端机将视频信号转化为数字信号通过光纤进行传输。那么&#xff0…

q7goodies事例_Java 8 Friday Goodies:Lambda和排序

q7goodies事例在Data Geekery ,我们喜欢Java。 而且,由于我们真的很喜欢jOOQ的流畅的API和查询DSL ,我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 我们已经写了一些关于Java 8好东西的博客 ,现在我们觉得是时候开始一个…

mysql存储过程语法 if_mysql存储过程语法 if

MySql存储过程MySQL 存储过程是从 MySQL 5.0 开始增加的新功能。存储过程的优点有一箩筐。不过最主要的还是执行效率和SQL 代码封装。特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库时(例如 PHP),要组织很多 SQL 语句。特别…

服务器突然关机的操作系统日志,一台R410 服务器不定时宕机,系统日志只有“上一次系统是意外关闭”...

R410环境操作系统 windows server 2008 r2 (一开始是windows server 2003)两个CPU:E5504内存:64G (4条16GB)故障现象:一开始运行windows server 2003也是不定时宕机,后由于业务需要更换为windows server 2008 r2还是不定时宕机&am…

什么是模拟量光端机?模拟光端机品牌有哪些?

模拟光端机采用了 PFM 调制技术实时传输图象信号。发射端将模拟视频信号先进行 PFM 调制后,再进行电-光转换,光信号传到接收端后,进行光电转换,然后进行 PFM 解调,恢复出视频信号。由于采用了PFM 调制技术,…

使用Spring Boot 2通过OAuth2和JWT进行集中授权

本指南逐步介绍了使用Spring Boot 2创建集中式身份验证和授权服务器的过程,还将提供演示资源服务器。 如果您不熟悉OAuth2,建议您阅读此书。 先决条件 JDK 1.8 文本编辑器或您喜欢的IDE Maven 3.0 实施概述 对于这个项目,我们将通过Sprin…

什么是物理隔离?物理隔离光端机是什么?

什么是物理隔离? 物理隔离,是指采用物理方法将内网与外网隔离从而避免入侵或信息泄露的风险的技术手段。物理隔离主要用来解决网络安全问题的,尤其是在那些需要绝对保证安全的保密网,专网和特种网络与互联网进行连接时&#xff0c…

linux mysql make_二、linux-mysql -cmake方式安装mysql 5.5

1.安装解压cmake包cmake软件cd /home/oldboy/tools/tar xf cmake-2.8.8.tar.gzcd cmake-2.8.8./configure#CMake has bootstrapped. Now run gmake.gmakegmake installcd ../2.依赖包yum install ncurses-devel -y3.安装mysql创建用户和组groupadd mysqluseradd mysql -s /sbi…

【渝粤教育】国家开放大学2018年春季 7405-21T面向对象程序设计(本) 参考试题

科目编号:7405 座位号 2018-2019学年度第二学期期末考试 面向对象程序设计(本) 试题 2018年 7 月 一、单选题(本大题共10小题,每小题3分,共计30分) (★请考生务必将答案填入到下面对…

太极虚拟服务器,太极 中标 云服务器

太极 中标 云服务器 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。云服务器组是对云服务器的一种逻辑划分,云服务器组…

【渝粤教育】国家开放大学2018年春季 8617-21T燃气仪表与自动化 参考试题

科目编号:8617 座位号 2017-2018学年度第二学期期末考试 燃气仪表与自动化 试题 2018年 7月 一、填空题(本大题共10空,每空3分,共计30分) 1.目前市场上比较著名的软件系统集成平台有 、 、及 。 2&#xf…

什么是自愈环网光端机?

对于光端机这块,相信大家都有所了解。但是,什么是自愈环网光端机呢?想必很多朋友对此不是很了解,相信大家可能会很感兴趣了解下自愈环网光端机吧。接下来就由飞畅科技的小编来为大家详细介绍下什么是自愈环网光端机吧,…

gui界面怎么分页_什么是用户界面和体验设计

本文译自 Mikos Philips 的 UI vs UX  —  A Guide to UI Design因为发现仍然有小伙伴跑来问我比较基础的专业划分问题,所以翻译了这篇科普文。——用户界面(UI, User Interface)设计是设计软件产品所涉及到的几个交叉学科之一。不论是用户…

【渝粤教育】国家开放大学2018年春季 8638-22T薪酬制度与薪酬管理 参考试题

科目编号:8638 座位号 2017-2018学年度第二学期期末考试 薪酬制度与薪酬管理 试题 2018年 7 月 一、单选题(本大题共10小题,每小题3分,共计30分) (★请考生务必将答案填入到下面对应序号的答题框中★&…