您的位置：首页 > Web前端 > CSS

CSS——后代选择器

2017-09-12 15:19 435 查看

后代选择器就是一种平衡：共性、特性的平衡。当需要把某一个部分的所有内容进行样式改变，就要想到后代选择器。后代选择器描述的是祖先结构。

<style type="text/css">
.div1 p{
color:red;
}
</style>

空格即表示后代，.div1 p就是.div1的后代的所有p，如下：

<style type="text/css">
.div1 p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
<div>
4000
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>

空格可以多次出现，比如以下就是.div1里面的后代.li2里面的p：

<style type="text/css">
.div1 li2 p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li>
<p>pages</p>
<p>pages</p>
<p>pages</p>
</li>
<li class="li2">
<p>pages</p>
<p>pages</p>
<p>pages</p>
</li>
</ul>
</div>
</body>

假设1：

<style type="text/css">
.div1 .div3 p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

假设2：

<style type="text/css">
div div p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

假设3：

<style type="text/css">
div .div2 div div p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

假设4：

<style type="text/css">
div .div2 div p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

以上四种假设的选择器都可以生效。

假设5：

<style type="text/css">
div2 .div1 .div3 .div4{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

假设6：

<style type="text/css">
div div .div4 div p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<p>猜猜我是什么颜色嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</body>

假设5和假设6无法生效，因为祖先顺序不对。

9073

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航