<!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. java读写cookie中文乱码解决方法

    1.写入的时候: public boolean addCookie( HttpServletRequest req, HttpServletResponse resp){ //创建 Cookie co ...

  2. OOP_面向对象程序设计概述

    李际军老师"面向对象程序设计"课程第一课笔记整理 面向对象程序设计概述 20世纪90年代以来面向对象程序设计(Object Oriented Programming, 简称OOP) ...

  3. 在一个form表单中实现多个submit不同的action

    在button中用JS的事件绑定onclick实现,如下: <!-- employees是表单的name属性值--> <script type="text/javascri ...

  4. goroutine基础

    程序1: package main import ( "fmt" "time" ) func test () { var i int for { fmt.Pri ...

  5. mac OS 安装qt环境

    先安装xcode,然后从官网下载dmg安装包安装即可,这里主要出现一个问题就是创建的工程没法编译,提示没有构建包(kit) 要安装command line tool才行. 在命令行中输入: xcode ...

  6. spring中使用动态代理(AOP)

    spring是整合了BGLIB和JDK两种动态代理 示例:使用CGLIB代理 public class MyCar { private String color = "blue"; ...

  7. Kafka无法消费?!我的分布式消息服务Kafka却稳如泰山！

    在一个月黑风高的夜晚,突然收到现网生产环境Kafka消息积压的告警,梦中惊醒啊,马上起来排查日志. 问题现象:消费请求卡死在查找Coordinator Coordinator为何物?Coordinat ...

  8. MogileFS表说明

    MogileFS大致的表说明如下 checksum:用来存放文件的校验和class:文件分类定义device:主机上的可用设备定义,包括设备可用空间,使用的权重等信息domain:域定义信息file: ...

  9. Unity性能优化-遮挡剔除

    1. Occlusion Culling-遮挡剔除的含义:没有在Camear视野范围内的游戏物体不进行渲染Render(默认情况下,Unity是会渲染所有GameObject,无论Camear是否看得 ...

  10. VBA学习资料分享-6

    从网上抓取数据到EXCEL中是VBA的一个常用之处,今天分享下VBA网抓的一些套路,主要有以下几种: 第一种:msxml2.xmlhttp/Microsoft.XMLHTTP/WinHttp.WinH ...