css排除第一个子元素的方法：1、通过使用伪类选择器“:not”实现排除；2、通过使用“nth-of-type”或者“nth-child”实现排除；3、通过使用“+”或者“~”兄弟选择符实现获取排除第一个之外的子元素。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
css获取除第一个之外的子元素
在前端页面开发中，需要使用css来选择除了第一个之外的子元素，例如希望每个span之间能间隔一定的距离，单不能给每个span设置margin-left，这样会导致第一个span的前面有间距，影响排版。下面就来讲解实现css获取除第一个之外的子元素的多种方法。
效果如下：
设计坞
基本结构如下：
.dom div{
float: left;
height: 150px;
line-height: 150px;
width: 150px;
margin: 20px;
background: #ccc;
text-align: center;
color:#fff;
方法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元素，第一个元素没有兄弟元素，所以就能获取除第一个之外的子元素。
Vue.js 无限滚动列表性能优化方案
追求进步的同学都关注了“1024译站”
这是1024译站的第 34篇文章
问题
大家都知道，Web 页面修改 DOM 是开销较大的操作，相比其他操作要慢很多。这是为什么呢？因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。那对用户有什么实际的影响呢？
一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动卡顿，严重影响了用户体验。怎么解决呢？
解决方案
既然问题的根源是 DOM 元素太多，那就想办法限制元素数量。
无限滚动的性能优化方案基本思路就是这样。
在实际项目中，我们可能不需要自己从头实现一个无限滚动列表组件，Vue.js 就有一个现成的轮子：vue-virtual-scroller。
在项目中安装这个插件：
$ npm install -D vue-virtual-scroller
项目入口文件main.js引入这个插件：
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import Vue from "vue";
import VueVirtualScroller from "vue-virtual-scroller";
Vue.use(VueVirtualScroller);
案例一：VirtualList
我们来看一个简单的例子，用vue-virtual-scroller渲染一个包含大量数据的列表。
先用JSON-Generator生成 5000 条数据的 JSON 对象，并保存到data.json文件。可以用下面的规则：
[
'{{repeat(5000)}}',
{
_id: '{{objectId()}}',
age: '{{integer(20, 40)}}',
name: '{{firstName()}} {{surname()}}',
company: '{{company().toUpperCase()}}'
}
]
新建一个VirtualList.vue文件，引入data.json，并将它赋值给组件的items属性。然后套一个组件：
VirtualList.vue：
<template>
<virtual-scroller :items="items" item-height="40" content-tag="ul">
<template slot-scope="props">
<li :key="props.itemKey">{{props.item.name}}li>
template>
virtual-scroller>
template>
<script>
import items from "./data.json";
export default {
data: () => ({ items })
};
script>
virtual-scroller组件必须设置item-height。另外，由于我们要创建一个列表，可以设置content-tag="ul"，表示内容渲染成标签。
vue-virtual-scroller支持使用scoped slots，增加了内容渲染的灵活性。通过使用slot-scope="props"，我们可以访问vue-virtual-scroller暴露的数据。
props有一个itemKey属性，出于性能考虑，我们应该在内容部分的根元素上绑定:key="props.itemKey"。然后我们就可以通过props.item拿到 JSON 里的原始数据了。
如果你要给列表设置样式，可以给virtual-scroller设置class属性：
<template>
<virtual-scroller class="virtual-list" ...>virtual-scroller>
template>
<style>
.virtual-list ul {
list-style: none;
}
style>
或者也可以用scoped样式，用/deep/选择器：
<style scoped>
.virtual-list /deep/ ul {
list-style: none;
}
style>
案例二：VirtualTable
类似VirtualList，我们再看一个表格组件VirtualTable：
VirtualTable.vue:
<template>
<virtual-scroller :items="items" item-height="40" content-tag="table">
<template slot-scope="props">
<tr :key="props.itemKey">
<td>{{props.item.age}}td>
<td>{{props.item.name}}td>
<td>{{props.item.company}}td>
tr>
template>
virtual-scroller>
template>
<script>
import items from "./data.json";
export default {
data: () => ({ items })
};
script>
这里有个小问题，我们需要增加一个标签，用于显示列名：Age,Name和Company
还好 virtual-scroller 支持 slot，可以定制各部分内容：
<main>
<slot name="before-container">slot>
<container>
<slot name="before-content">slot>
<content>
content>
<slot name="after-content">slot>
container>
<slot name="after-container">slot>
main>
这些 slot 都可以放置自定义内容。container会被container-tag属性值替换，默认是div，content被content-tag值替换。
这里用before-contentslot 加一个thead就行了：
<template>
<virtual-scroller
:items="items"
item-height="40"
container-tag="table"
content-tag="tbody"
>
<thead slot="before-content">
<tr>
<td>Agetd>
<td>Nametd>
<td>Companytd>
tr>
thead>
<template slot-scope="props">
<tr :key="props.itemKey">
<td>{{props.item.age}}td>
<td>{{props.item.name}}td>
<td>{{props.item.company}}td>
tr>
template>
virtual-scroller>
template>
请注意，我们把content-tag="table"改成了content-tag="tbody"，因为我们设置了container-tag="table"，这是为了构造table标签的常规结构。
如果要加一个tfoot，应该知道怎么做了吧。
总结
我们了解了无限滚动列表的性能优化原理，以及利用vue-virtual-scrollerVue 插件创建了VirtualList和VirtualTable组件。如果用它们来展示前面生成的 5000 条数据，应该可以比较流畅地渲染和滚动了。更多用法可以参考 vue-virtual-scroller 文档。
顺手点“在看”，今天早下班；转发加关注，共奔小康路~
