<!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. Spring IoC 和 DI 简介（二）

    Spring IoC 和 DI 简介 IoC:Inverse of Control(控制反转) 读作“反转控制”,更好理解,不是什么技术,而是一种设计思想,就是将原本在程序中手动创建对象的控制权,交由 ...

  2. 一个好隐蔽的C/C++代码bug

    来自:微博@ruanyf, 一本书上说,下面的 C 语言代码可能会产生无限循环.看了半天,才意识到 Bug 在哪里. 完美解答: 数组下标越界.数组a总共有10个值,a[0]~a[9].for循环里面 ...

  3. python学习-22 字符串格式化

    格式化包括:百分号方式和format方式 1.百分号 - %s   (%.4s   表示截取了4个字符) 传单个值: 例如: print('i am %s sex boy is ljj'%123) 运 ...

  4. 使用Python比较MySQL数据库中两个数据库的表结构--转载

    https://blog.csdn.net/tenaguan4461/article/details/82286781 https://www.jianshu.com/p/b3dac5a3479a

  5. Tomcat与WAS应用中间件差异化分析研究

    --转载 http://blog.chinaunix.net/uid-25723371-id-5759072.html 目前我们在使用的基于JAVA的提供逻辑展现应用中间件有两种,一种是以商用软件WA ...

  6. ZROI17普及23-A.如烟题解--技巧枚举

    题目链接 因版权原因不予提供 分析 别看这是普及模拟赛,其实基本上是提高难度...像这题做NOIpT1的话也说的过去 有个很显然的暴力思路就是枚举c,a,b,时间复杂度\(O(N^3)\), 然后正解 ...

  7. qt连接oracle数据库

    由与qt开源版本没有提供oracle数据库驱动,需要自己根据源代码来手动编译oracle驱动. 经过近三天的折腾,终于成功编译oracle驱动,连接到数据库 ps:期间经过各种失败疼苦迷茫.现在终于完 ...

  8. POJ1988(Cube Stacking)--并查集

    题目链接:http://poj.org/problem?id=1988 题意:有n个元素,开始每个元素各自在一个栈中,有两种操作,将含有元素x的栈放在含有y的栈的顶端,合并为一个栈. 第二种操作是询问 ...

  9. wepy全局拦截器

    wepy有支持全局拦截器,但是请求需要使用wepy.request().then(): 在app.wpy文件中配置以下内容,与data同级 constructor(){ super(); this.u ...

  10. JAVA基于PDF box将PDF转为图片

    在一项目中用到,本身我是.NET的,团队中有用到JAVA,故此我处理这个功能,记录以下备用. 1.引用:fontbox-2.0.16.jar.pdfbox-app-2.0.16.jar 版本一定要正确 ...