后代选择器查找原理
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father p{
color: red;
} /*后代选择器 原理: 浏览器在寻找对应标签的时候不是从左向右而是从右向左找, 以这个例子为例, 浏览器先找p标签,再找 class="father"的标签*/
</style>
</head>
<body>
<div class="father">
<div class="novle">
<p>三国演义</p>
<p>红楼梦</p>
</div>
<div class="movie">
<p>肖申克的救赎</p>
<p>唐伯虎点秋香</p>
</div>
</div>
<p>威尼斯的商人戏剧</p>
</body>
</html>
子元素选择器 原理
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father> p{
color: red;
} /*子元素选择器 原理: 找到p标签, 并且判断这个p是否是father的直接子元素 */
</style>
</head>
<body>
<div class="father">
<p>威尼斯的商人戏剧</p>
<p>哈姆雷特戏剧</p>
<div class="novle">
<p>三国演义</p>
<p>红楼梦</p>
</div>
<div class="movie">
<p>肖申克的救赎</p>
<p>唐伯虎点秋香</p>
</div>
</div>
</body>
</html>