【前端】如何制作一个自己的网页（15）

后代选择器使用时，需要以空格将多个选择器间隔开。

比如，这里p span，表示只设置p元素内，span元素的样式。

<style>

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

    p span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

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

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

这里的空格，用于区分多个选择器的先后顺序。后代选择器有严格的先后顺序，后代元素必须在空格后面。也就是说，span p这种写法在这里是错误的。

<style>

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

    p span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

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

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

后代选择器里的声明，只会给后代元素设置样式。

比如，这里只会给p元素的后代元素span，设置字体颜色和背景颜色。

<style>

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

    p span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

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

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

div一般用于排版布局，即把内容放到一个矩形的区块中，随意移动会影响布局，结合CSS用于设置网页中一个版块的样式。

span只是把一部分内容定义成一个整体，结合CSS用于设置网页中的局部样式。

示例中，我们通过div标签选择器设置了div这个版块的背景颜色。

通过后代选择器，设置了p元素的后代span元素包裹的内容的字体颜色和背景颜色。

<style>

    /* 使用div标签选择器设置样式 */

    div {

        background-color: #CCCCCC;

    }

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

    p span {

        color: #FFFFFF;

        background-color: #5E80F4;

    }

</style>

<div>

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

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

</div>

    <p>div版块之外的内容</p>

div属于块级元素，会独占一行；span属于行内元素，不会独占一行。