CSS: 指向目标下第一层或者全部层的元素 Target first level <li>s and not the nested <li>...

CSS选择器详解

最新推荐文章于 2022-10-27 13:58:48 发布

原创最新推荐文章于 2022-10-27 13:58:48 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细介绍了CSS中使用>选择器来精确控制不同层级的列表项样式的方法，并提供了示例代码，同时指出了该选择器在不同浏览器中的兼容性情况。

Have a container <div> with a class, and use the > selector. Lets say your container div's class is "myclass":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Note: the > selector does not work in IE6 and below when used as a CSS selector. It does work in all other browsers though, including IE7 and IE8, and when used in JQuery, it works in all browsers supported by jQuery, including IE6.

源自: http://stackoverflow.com/a/4830672/4484798

还可以参考下面的写法: