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

CSS选择器笔记，element element和element > element 的区别

2015-11-01 16:27 706 查看

看官方解释

element element 例子: div p 官方解释:div内部所有的p元素

就是说只要p在div内部。如果 p在span内部，span在div内部，p也算在div内部

<!DOCTYPE html>
<html>
<head>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p> <!--黄色背景-->
<p>段落 2。 在 div 中。</p> <!--黄色背景-->
<span><p>121234</p></span> <!--黄色背景-->
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

element > element 例子 div > p ，官方解释: 选择父元素为 <div> 元素的所有 <p> 元素。

p在span内部，span在div内部，p这时的父元素不是div而是span,那么p没有被中，p是div孙子元素

<!DOCTYPE html>
<html>
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p> <!--黄色-->
</div>

<div>
<span><p>I will not be styled.</p></span> <!--p在span里。但是p的父元素是span，所以这里不是黄色-->
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航