css后代选择器实例讲解

时间:2016-06-25
css后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。本文章向大家介绍css后代选择器的使用方法和基本使用实例,需要的朋友可以参考一下。

后代选择器,顾名思义,是一种具有从属关系的选择。

多个选择器以空格分开,组合成从属关系,且右边的选择器从属于左边(即右边的选择器只能在左边的选择器范围内选择)。

后代选择器语法

后代选择器语法结构图如下所示:

css后代选择器实例讲解

父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素。

一个后代选择器的应用示例:

#nav a{
    text-decoration: none;
}

后代选择器实例

选择<div>元素内的所有<p>元素:

<!DOCTYPE html>
<html>
<head>
<style>
div p{
    background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

在线运行

“div p{background-color:yellow;}”表示选择div里面的所以p元素;然后将这些元素的background-color设置为yellow。