css怎么排除第一个子元素-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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

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

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

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

效果如下：

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

基本结构如下：

<style>
.dom div{
    float: left;
    height: 150px;
    line-height: 150px;
    width: 150px;
    margin: 20px;
    background: #ccc;
    text-align: center;
    color:#fff;
}
</style>
 <div class="dom">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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

<style>
.dom  div:not(:first-child){
    background:red;
}
</style>

说明:

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css怎么排除第一个子元素

css怎么排除第一个子元素

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论