<!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>

后代元素 span:first-child{...}的更多相关文章

  1. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  2. jquery层级原则器（匹配后代元素div）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. HTML&CSS基础-子元素和后代元素选择器

    HTML&CSS基础-子元素和后代元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html ...

  4. jquery 子元素 后代元素 兄弟元素 相邻元素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

  6. jQuery查找子元素与后代元素

    1. 子元素: $().children('选择器')  如选择type为file的子元素  $(this).children("input[type=file]") 或者 $(& ...

  7. jQuery选择：子代元素与后代元素的区别

    (1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...

  8. Jquery学习笔记：利用find和children方法获取后代元素

    在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...

  9. jQuery -&gt; 获取后代元素的三种方法

    假设我们有内容例如以下的html文件,那么怎样选取包括在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住 ...

随机推荐

  1. Linux下使用Vim粘贴文本错乱问题解决

    在使用vim进行文档操作时,经常需要进行复制粘贴,在粘贴大量代码时,出现行错位等各种错乱,查找问题解决办法: vim进入文件后,先ESC 在出入 :set paste  回车后再按下 i  之后进行粘 ...

  2. C++Primer 5th Chap3 Strings,Vectors, and Arrays

    使用名字空间成员的简单方法: using namespace ::name;例如:using std::cin; 头文件不应包含using声明 标准库类型string:(需要带有头文件#include ...

  3. 笔记-10：处理时间的标准库-time库

    1.time库介绍 主要用来处理时间的标准库. time库提供了系统级精确计时器的计时功能,可以用来分析程序性能,也可让程序暂停运行时间. time库的功能主要分为:时间处理.时间格式化.计时. 2. ...

  4. 【BFS】斗地主

    斗地主 题目描述 众所周知,小 X 是一个身材极好.英俊潇洒.十分贪玩成绩却依然很好的奆老.这不,他又找了他的几个好基友去他家里玩斗地主了……身为奆老的小 X 一向认为身边人和自己一样的厉害,他坚信你 ...

  5. Board Game CodeForces - 605D (BFS)

    大意: 给定$n$张卡$(a_i,b_i,c_i,d_i)$, 初始坐标$(0,0)$. 假设当前在$(x,y)$, 若$x\ge a_i,y\ge b_i$, 则可以使用第$i$张卡, 使用后达到坐 ...

  6. SpringCloud Stream 消息驱动

    1.什么是消息驱动 SpringCloud Stream消息驱动可以简化开发人员对消息中间件的使用复杂度,让系统开发人员更多尽力专注与核心业务逻辑的开发.SpringCloud Stream基于Spr ...

  7. Asp.Net Core Linux环境下 找不到配置文件、静态文件的问题

    直接发布会找不到配置文件,和静态文件.需要先cd到项目文件夹,然后在发布.

  8. Unity 自定义"=="操作符 [翻译来源blogs.unity3d,2014/05]

    主要内容来源 https://blogs.unity3d.com/cn/2014/05/16/custom-operator-should-we-keep-it/ 在我们代码里,如果有这样的代码: i ...

  9. meta标签常见浏览器设置

    一.如何让双核浏览器默认选择 WebKit 内核渲染自己开发的网页 我们可以使用标签来指定适合自己网站的渲染内核名称,当双核浏览器访问本网页时,就会根据我们的指示,选择我们指定的渲染内核来处理网页.若 ...

  10. mongoose整理笔记

    一:参考学习网址 npm: https://www.npmjs.com/package/mongoose 官网API:http://mongoosejs.com/docs/guide.html 二:在 ...