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

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

 

还可以参考下面的写法:

$('ul > li:not(:has(ul))');

 

 

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

 

 

 

 

 

在HTML中,列表是一种常用的元素用于组织信息,分为四种主要类型的列表: **2.4 无序列表 (Unordered List)** 无序列表通常使用 `<ul>` 标签创建,并由一系列 `<li>`(list item,项目)标签组成,每个项目前会自动添加一个符号如`<li>*</li>` 或 `<li>-</li>`。要自定义列表符号的样式,可以使用CSS。例如,通过设置 `list-style-type` 属性,可以在 `<ul>` 上应用样式: ```html <ul class="custom-list"> <li>项目1</li> <li>项目2</li> </ul> <style> .custom-list { list-style-type: square; /* 更改符号,如disc(实心圆点),circle(空心圆圈)等 */ } </style> ``` **2.4.1.1 在<ul>后指定符号样式** 通过类名或ID,可以直接在 `<ul>` 元素上定义样式,而不是每个 `<li>`: ```html <ul class="custom-square-list"> <li>项目1</li> <li>项目2</li> </ul> <style> .custom-square-list { list-style-type: square; } </style> ``` **2.4.1.2 在<li>后指定符号样式** 若想让每个项目的符号独立定制,可以在每个 `<li>` 内部添加自定义样式,如使用伪元素 `::before`: ```html <ul> <li><span class="custom-dot">.</span>项目1</li> <li><span class="custom-dot">.</span>项目2</li> </ul> <style> .custom-dot { display: inline-block; content: '.'; /* 颜色、大小等其他样式 */ } </style> ``` **2.4 有序列表 (Ordered List)** 有序列表使用 `<ol>`,项目前有数字或字母编号,比如 `<ol type="1">` 可以显示一、二、三...。同样支持CSS样式调整。 **2.4.3 定义列表 (Definition List, dl)** 定义列表包含 `<dt>`(定义项,Definition Term)和 `<dd>`(定义描述,Definition Description): ```html <dl> <dt>术语1</dt> <dd>这是关于术语1的解释。</dd> </dl> ``` CSS也可以修改其外观。 **2.4.4 嵌套列表 (Nested Lists)** 列表可以嵌套在其他列表中,只需保持相同的结构即可: ```html <ul> <li>顶级项目 <ul> <li>子项目1</li> <li>子项目2</li> </ul> </li> </ul> ``` 这会创建一个有次感的列表结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值