嵌套选择器与子选择器的不同：

最新推荐文章于 2024-06-20 00:12:18 发布

wwttqq85538649

最新推荐文章于 2024-06-20 00:12:18 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： xhtml css class html

本文链接：https://blog.csdn.net/wwttqq85538649/article/details/5530748

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

以下代码为子选择器：

<!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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">ul.myList > li > a{ /* 子选择器 */ text-decoration:none; /* 没有下划线 */ color:#336600; }</style> </head> <body> <ul class="myList"> <li><a href="http://picasaweb.google.com/isaacshun" mce_href="http://picasaweb.google.com/isaacshun">isaac's Picasa</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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">ul.myList > li a{ /* 子选择器 */ text-decoration:none; /* 没有下划线 */ color:#336600; }</style> </head> <body> <ul class="myList"> <li><a href="http://picasaweb.google.com/isaacshun" mce_href="http://picasaweb.google.com/isaacshun">isaac's Picasa</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>

运行结果：