CSS 后代和子代选择器

1 后代选择器

  它又称为包含选择器，用来选择特定元素的后代，在CSS中，当元素发生嵌套时，内层的元素就称为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代，而且B的后代也是A的后代。

 定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。

 div p { color:red;}

 上述选择器中，div为祖先元素，p为后代元素，其作用就是选择div元素的所有后代p元素，不管层级关系，p元素中的文本都会变为红色。

 2 子代选择器

　语法格式 h1 > em {color:red;} 表示从h1 开始里面的第一层em元素变成红色，h1为祖先，em 为儿子。

　 注意：只能是亲儿子，孙子和干儿子都不行

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 > strong {
            color:red;
        }
    </style>
</head>
<body>
    <h1>我们是害虫 <strong>就是不死小强</strong></h1>
    <h1>我们是害虫 <i>就是不死小强</i></h1>
</body>
</html>

 

posted @ 2018-07-05 15:24  会开车的好厨师  阅读(441)  评论(0)    收藏  举报