span是一个行内元素，可以对HTML文档中的内容进行局部布局。

如图，我们给标题和段落元素的部分内容设置了各种样式。

接下来，我们一起学习span元素的用法。

第8行，在<p>标签内定义了4个span元素。

第2-5行，使用标签选择器，设置span元素的背景颜色为#5E80F4，字体颜色为#FFFFFF。

<style>

    span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

<p>夜曲编程是一个在线学习编程的网站，发布了<span>数据分析基础</span>、<span>数据分析进阶</span>、<span>网络爬虫</span>、<span>网页开发基础</span>等课程。</p>

<span>标签

<span> 标签也没有什么特殊的显示效果。

简单来说，<span>标签中的内容会被标记，当它结合CSS设置样式时，其中的内容才会有视觉上的变化。

span是一个行内元素，可以直接在段落元素p的内部对一些内容进行标记。

<style>

    span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

<p>夜曲编程是一个在线学习编程的网站，发布了<span>数据分析基础</span>、<span>数据分析进阶</span>、<span>网络爬虫</span>、<span>网页开发基础</span>等课程。</p>

在网页中，如果span元素出现很多，那么使用span标签选择器会改变所有span元素的样式。

比如，使用span选择器就会同时设置h3和p内部的span元素样式。

但是有时候，我们只需要设置特定元素中的span元素样式，那么该怎么办呢？

因为span元素一般都是放在块级元素内。

所以，我们要设置指定元素内的span元素样式，就需要用到后代选择器。

第3-6行，定义一个后代选择器。

<style>

    /* 使用后代选择器设置样式 */

    p span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

<h3><span>夜曲编程</span><span>简介</span></h3>

<p>夜曲编程有<span>数据分析</span>、<span>网页开发基础</span>等课程。</p>