后代选择器和子选择器的区别

第一段代码给出子选择器 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS的子选择器</title>
<style type="text/css">
ul.myList>li>a {
text-decoration: none;
color: #336600;
}
</style>
</head>
<body>
<ul class="myList">
<li><a href="http://www.cnblogs.com/Knuth">Knuth档案</a>
<ul>
<li><a href="#" mce_href="#">CSS1</a></li>
<li><a href="#" mce_href="#">CSS2</a></li>
<li><a href="#" mce_href="#">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>

 第二段代码给嵌套选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS的嵌套选择器</title>
<style type="text/css">
ul.myList li a {
text-decoration: none;
color: #336600;
}
</style>
</head>
 
<body>
<ul class="myList">
<li><a href="http://www.cnblogs.com/Knuth">Knuth档案</a>
<ul>
<li><a href="#" mce_href="#">CSS1</a></li>
<li><a href="#" mce_href="#">CSS2</a></li>
<li><a href="#" mce_href="#">CSS3</a></li>
</ul>
</li>
</ul>
</body>

</html> 

原文地址:https://www.cnblogs.com/Knuth/p/2316119.html