<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* .container:first-child 这样写是错误的，任意父元素下面的第一个.container子元素 这样差别很大，不该放的错。这是对后代选择器的不熟悉。 .container > span:first-child 表示：父元素.container下面第一个span元素进行设置样式 */ .container > span:first-child{ display: inline-block; /* center center表示图片显示中间 */ background: #f0f url('../img/logo.png') center center scroll; background-size: cover;/* 表示图片全部显示在区域内 详见background*/ width: 85px; height: 85px; } .logo{ display: inline-block; /* center center表示图片显示中间 */ background: #f0f url('../img/logo.png') center center scroll; background-size: cover;/* 表示图片全部显示在区域内 详见background*/ width: 85px; height: 85px; } </style></head><body> <div class="container"> <span class="logo"></span><span>慕课高铁服务中心</span><span>|</span><span>客户服务</span> </div> <div> <span class="logo"></span><span>慕课高铁服务中心</span><span>|</span><span>客户服务</span> </div></body></html>