<!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. 剑指offer53：表示数值的字符串，字符串"+100","5e2","-123","3.1416"和"-1E-16"都表示数值。 但是"12e","1a3.14","1.2.3","+-5"和"12e+4.3"都不是

    1 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3 ...

  2. 数值类型与std::string的相互转换

    1.使用std::stringstream: //将in_value值转换成out_type类型 template<class out_type, class in_value> out_ ...

  3. python学习-46 时间模块

    时间模块 ····时间戳 print(time.time()) 运行结果: 1564294158.0389376 Process finished with exit code 0 ·····结构化时 ...

  4. selenium cookie 登录

    前言 爬虫方向的小伙伴们都知道网页爬虫经常遇到的问题就是登录账户,有些简单的网站我们可以简单的send key来输入账户密码就可以登录,但是有很多网站需要验证码之类的就不太好用了,这时候就体现到了co ...

  5. golang之map的使用声明

    1.map的基本介绍 map是key-value数据结构,又称为字段或者关联数组.类似其它编程语言的集合,在编程中是经常使用到的 2.map的声明 1)基本语法 var map 变量名 map[key ...

  6. 1233: 输出杨辉三角前n行（Java）

    WUSTOJ 1233: 输出杨辉三角前n行 题目 原题链接 Description 输出杨辉三角前n行. Input 输入一个数n(n <= 9) Output 输出杨辉三角前n行.(注意行末 ...

  7. C# EntityCollection 和 List 互转

    private EntityCollection<T> ToEntityCollection<T>(this List<T> list) where T : cla ...

  8. java集合的作用

    从架构的方面来理解,可能稍微容易一点.在编程中,需要管理很多对象集.比如某班全部同学,某个公司所有人员资料等.要管理这些资料,java必须提供某种数据结构支持.由于时间,空间,安全的考虑,有各种不同的 ...

  9. 关于el-select 单选与多选切换的时候报错的解决办法

    错误: 出错原因: 估计是单选切换到多选的时候元素没有刷新的原因,猜测 解决办法: 1.在el-select上面加上一个条件判断, 条件判断中绑定一个变量值 例如 :multiple="is ...

  10. ES6箭头函数及this指向

    箭头函数(=>):函数简写 无参数:() => {} 单个参数:x => {} 多个参数:(x, y) => {} 解构参数:({x, y}) => {} 嵌套使用:部署 ...