CSS nest-list - 如何分段-6ren

CSS nest-list - 如何分段

转载作者：太空宇宙更新时间：2023-11-04 08:45:02

25

4

我正在创建一个像这样的列表

我想把罗威纳犬和杜宾犬列为 1.1 和 1.2，但我不知道该怎么做。我复制了那个 css 列表模板并做了一些修改。这是代码:

#lista2 {
    counter-reset: li; 
    list-style: none; 
    *list-style: decimal; 
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#lista2 ol {
    margin: 0 0 0 2em; 
     counter-reset: section;             
  	list-style-type: none;
}

#lista2 li{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   

}

#lista2 li:hover{
    background: #eee;
}

#lista2 li:hover:before{
    transform: rotate(360deg);  
}

#lista2 li:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

#lista2 ol ol li:before{
	counter-increment: li;
  content: counters(li,".") " ";
}
#lista2 ol {
    counter-reset: li;
    list-style: none;
}

<ol id="lista2">
  <li>Animals
			<ol>
				<li>Dogs</li>
					<ol>
						<li>Rottweiler</li>
						<li>Doberman</li>
					</ol>
				<li>Cats</li>
				<li>Cacatoos</li>
				</ol>
		</li>
 </ol>

我希望有人能帮助我。谢谢!

最佳答案

Plunkr 链接 - https://plnkr.co/edit/dtn5xgoOOoSmVc4B3LrH?p=preview

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
      <style>
   OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, ".") " "; counter-increment: item }
  </style>
  </head>

 <body>
 <ol>
  <li>Dogs

  <ol>
   <li>Rottweiler</li>
   <li>Doberman</li>

  </ol>
</li>
  <li>Cats
     </li> 
  <li>Cacatoos</li>
  </ol>

  </body>

</html>

CSS:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

关于CSS nest-list - 如何分段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43835289/

25

4

0

文章推荐： java - 在控制台上画一 strip 星号的线

文章推荐： c - 数据和堆栈部分

文章推荐： java - 如何从 Java 对象中提取数据？

nest-api - Nest API是否提供湿度信息？
在查看Thermostat Guide时，我没有提到湿度读数。这些数据可以通过API获得吗？会在以后的版本中吗？最佳答案从NestAPI v1.1开始，似乎湿度数据可以作为只读字段使用。可以在v
nest-api - Nest API如何获取access_token
我从以下位置获取了授权码 https://home.nest.com/login/oauth2?client_id=CLIENT_ID&state=FOO . 我想获取access_token，但是出
nest - 使用 Nest 索引多个文档的方法差异
使用1.1.2版本的Nest，似乎至少有3种索引多个文档的方法: IndexMany client.IndexMany(documents, "index_name", "type_name"); 使
java - Spring-data-elasticsearch “nested query throws [nested] failed to find nested object under path”异常
我有2个POJO(人和车)，其中一个由另一个人引用 @Document(indexName = "person", type = "user") public class Person { @
nest-api - Nest Protect 的温度和湿度
Nest Protect(烟雾和一氧化碳警报)可以测量温度和湿度，但官方或非官方 API 似乎都不允许访问这些数据。有人在工作吗？任何视线访问这些数据？建议？谢谢! 最佳答案 $infos = (o
nest-api - Nest API 是否提供了一种获取历史能源使用情况的方法？
自从我得到 Nest 以来，我所想要的就是能够在很长一段时间内汇总我的能量使用情况以寻找模式，主要是满足我的好奇心。当然有每月使用报告，而且网络和设备只能追溯到 10 天。 API 是否公开了这些数据
nest-api - 获取和更改 Nest 恒温器的基本数据
我在获取和更改 Nest 恒温器提供的一些基本数据时遇到了问题。使用命令行，我如何获取或更改恒温器上的个别设置或值？最佳答案这是几个用户的汇编，解释了如何检索或更改一些基本信息，并添加了我自己的
coding-style - if : to nest or not to nest 的样式
我和我的一位同事就以下最佳实践问题进行了讨论。大多数函数/方法都从一些参数检查开始。我提倡以下风格，避免嵌套。 if (parameter one is ugly) return ERROR; i
nested - Sequelize : Ordering by Nested Associations
我有 4 个表: ChatRooms Participants Messages Users 聊天室有很多参与者聊天室有很多消息用户有很多消息用户有很多参与者参与者属于用户消息属于用户我正
nest - 如何在 elasticsearch nest 中获取索引的映射？
我编写了以下函数并得到如下所示的响应: public async Task ShowMapping(string indexname) { var resu
nest - Elasticsearch NEST/C# 的序列化错误
我正在使用 NEST 为我的对象编制索引，但在序列化时遇到了 Newtonsoft 错误。我的一个对象有一个自引用循环。有没有一种方法可以让我访问 JsonSerializer 并更改它处理自引用的方
nest-api - 设置目标温度会在 Nest 恒温器中引发错误
设置目标温度会引发如下错误。我正在使用 php curl 来设置温度。任何帮助表示赞赏。 object(stdClass)#72 (2) { ["cmd"]=> stri
nest - 如何在 elasticsearch nest 中获取索引的映射？
我编写了以下函数并得到如下所示的响应: public async Task ShowMapping(string indexname) { var resu
nest-api - Nest API iOS 错误
我正在使用 Nest Developer https://developer.nest.com/用于创建 iOS 应用程序的 API。有谁知道如何将 Firebase 框架链接到我的应用程序中？我不断
nest-api - 从 Nest Cam 访问直播
我是名为 Feather (featherapp.co) 的综合性 Apple TV 应用程序的开发者。我遇到的一个问题是用户希望能够查看他们相机的实时画面。有没有人确定访问摄像头实时画面的方法？我
javascript - knockout : Nested observableArrays and Nested ForEach
免责声明 - 我担心这个问题可能是重复的，因为功能看起来很基本，所以我知道我可能会得到一个骗局。但我找不到有效的解决方案所以我有一个可观察的数组设置如下 self.meetingAttendees
Nest.JS token providers(Nest.JS令牌提供程序)
我正试着给我的模块提供一个令牌。该模块如下所示：。我将AuthGuardModule导入到的父模块如下所示：。而gardConfigProvider本身如下所示：。但我得到一个错误：Error[Exc
Nest.JS token providers(Nest.JS令牌提供程序)
我正试着给我的模块提供一个令牌。该模块如下所示：。我将AuthGuardModule导入到的父模块如下所示：。而gardConfigProvider本身如下所示：。但我得到一个错误：Error[Exc
nest-api - Nest API - 每个访问 token 速率限制持续多长时间
每 10 秒使用一次访问 token 时遇到太多请求错误。在重新阅读文档时，我意识到这是一个禁忌(“为了避免错误，我们建议您以每分钟一次或更短的速度提出请求”)。有谁知道我会被限制多久？最佳答案
nested - 通用 Lisp : Appending a nested plist efficiently
我使用嵌套 plist 来创建对象结构(CLOS 类型)，将嵌套的对象传递给它的部分。我想以迭代方式 append 嵌套的 plist，但因此我想在时间和内存方面高效地完成它。以下示例显示了由于一次

首页

博学

6Ren·AI

商城

CSS nest-list - 如何分段