后代选择器的范例

89 阅读 0 评论 59 点赞

我是靠谱客的博主大气橘子，这篇文章主要介绍后代选择器的范例，现在分享给大家，希望可以做个参考。

1、后代选择器的作用是：当X元素中包含y元素时，后代选择器有办法选中y元素。
2、后代选择器的写法是：X y，也就是说外面的写在前面，内层的写在后面。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
    /*下面是一个a标记，即链接标记*/
    a{
        color: red;
    }
    /*下面是一个后代选择器，其中在外面的是一个a标记，在里面的是一个b标记，即粗体标记*/
    a b{
        color: green;
    }
</style>
<body>
    <b>示例文字000</b></br><!--参照组，单纯的b标记，未在上面CSS中定义-->
    <a href="#">示例文字001</a></br><!--参照组，a标记，CSS中定义为红字-->
    <a href="#">示例文字<b>002</b>示例文字003</a><!--通过后代选择器，将a标记中的b标记找出来，并给出绿色-->
</body>