<!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. Python基础 第5章 条件、循环及其他语句（2）

    6. 简单推导 列表推导,是一种从其他列表创建列表的方式,其原理类似于for循环. list1 = [x * x for x in range(10)] print(list1) 结果: [0, 1, ...

  2. Python学习5——抽象，涉及抽象和结构、函数的自定义、参数、作用域、递归

    此处将抽象和结构.自定义函数.参数的使用.作用域.递归放在一起学习,看起来很怪是不是? 但实际上这几者之间是有紧密联系的,不然Python基础教程(第三版)的作者为什么会把它们放在一起哪?手动滑稽 好 ...

  3. 【全排列+子序列】Color

    [题意] 这个题目就是问,是否存在每个人对应每一种颜色,如果存在则输出字典序最小的. 否则输出-1 [题解] 利用next_permutation来构造36种情况.记住最后还需要排序一遍. 然后用子序 ...

  4. java字节和字符的区别

    字节: 1.bit=1  二进制数据0或1 2.byte=8bit  1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字 ...

  5. 线段树 面积并问题 hdu 1255 1542

    重点整理面积并的思想 以及PushUp的及时更新 还有就是cover的实现 以及建树每个节点存的信息(每个节点存的是一个线段的信息) http://www.tuicool.com/articles/6 ...

  6. mysql cmd命令行 创建数据库 表 基础语句

    一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1. 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u roo ...

  7. 括号配对检测 A

    括号配对检测 A ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮ ...

  8. vue的$nextTick使用后的js代码执行顺序问题

    一.问题产生背景: 父组件已经获得子组件实例,并能直接触发子组件的方法,在父组件中调用了子组件的两个方法 // 父组件调用子组件,this.picker是获取的子组件整个实例,先调用update,再调 ...

  9. 一个SAP开发人员的养蚕流水帐

    Jerry打算以此文来给汪子熙全家进行了一个多月的养蚕经历画上一个圆满的句号. 南方长大的80后,对蚕应该不会太陌生.大家还记得你们小时候学过的课文<蚕姑娘>么?课文开头是这样的: 春天天 ...

  10. Manifold learning 流形学习

    Machine Learning 虽然名字里带了 Learning 一个词,让人乍一看觉得和 Intelligence 相比不过是换了个说法而已,然而事实上这里的 Learning 的意义要朴素得多. ...