外部页面上的UL/OL项目计数
UL和OL是HTML中常用的两种列表标签，用于在外部页面上展示项目的计数。
UL（Unordered List）是无序列表标签，用于表示一个无序列表。无序列表中的项目没有特定的顺序，以符号（通常是实心圆点）作为标记。
OL（Ordered List）是有序列表标签，用于表示一个有序列表。有序列表中的项目按照特定的顺序进行排列，以数字、字母或其他自定义标记作为项目的计数标记。
外部页面上的UL/OL项目计数可以通过CSS样式进行定制，包括修改标记的样式、顺序、起始值等。通过修改CSS样式，可以实现自定义的列表计数效果。
以下是外部页面上的UL/OL项目计数的应用场景和示例代码：
应用场景：
- 博客文章中的步骤展示
- 商品列表中的特性展示
- 菜单中的选项展示
示例代码：
<!-- 无序列表示例 -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<!-- 有序列表示例 -->
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>对应腾讯云相关产品和产品介绍链接地址：
- 无序列表：腾讯云 COS（对象存储服务）：https://cloud.tencent.com/product/cos
- 有序列表：腾讯云 CMQ（消息队列服务）：https://cloud.tencent.com/product/cmq
相关·内容
1回答
请检查下面的代码，我有ol和ul在同一页，我只想用类来评估ul，有人能帮我吗？
这是ol的代码
<ol class='testing-class'>
<li>test1</li>
<li>test2</li>
</ol>
这是ul的代码
<ul class='testing-class'>
<li>test3</li>
<li>test4</li>
</ul>
我在试着
jQuery( ".testing-cla
浏览 4提问于2020-07-16得票数 1
回答已采纳
所以我尝试在CSS中使用嵌套计数器，但我不太熟悉它的工作原理，这是我到目前为止所拥有的，
但我希望发生的是，每次出现无序列表时，当我启动一个有序列表时，它会重置为1.2. 3。
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<ol>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<ol>
浏览 4提问于2022-10-02得票数 3
回答已采纳
2回答
我正试图在项目之间列一个有标题的有序列表，例如：
标题1
1. item 1
2. item 2
标题2
1. item 3
2. item 4
然而，我希望标题2与标题1齐头并进。这是使用的代码(由于我必须遵循的样式指南，ul标记是必需的)。
<ul>
Heading 1
<ol>
<li>item 1</li>
<li>item 2</li>
Heading 2
<li>item 3</li>
<li>item 4</li>
<
浏览 0提问于2018-10-15得票数 1
如果ol中的ol格式如下所示，则很容易得到正确的计数。
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
</ol>
</li>
<li>item</li>
<li>item
浏览 0提问于2015-09-04得票数 1
回答已采纳
1回答
我正在尝试弄清楚如何使我的嵌套无序列表不继承父有序列表。到目前为止，它以所有列出的项目作为背景图像。我只想让我的有序列表显示背景图像。
div#column1 ol li {
list-style-image: url(akMLpics/bullets.png);
}
div#column1 ol li>ul {
list-style-type: square;
}
<div id="column1">
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adip
浏览 0提问于2017-03-24得票数 0
1回答
我正在使用来自的矩形OL样式，它工作得很完美，除了在我有一个页面上。
我试图在分页搜索结果页面上使用该样式，我不知道如何获得计数器值以正确更新：
在第一页的10个结果，李的正确编号(1，2，. 9，10)。
但是在第二页上，李氏会被重置，显示1，2，...9，10，当它们应该是11，12，...19，20等等。
有没有任何方法可以通过javascript指定页面上的起始计数？这些页面是通过XQuery构建的，每个页面上都有一个变量，指示起始号应该是什么。
浏览 2提问于2015-07-31得票数 0
回答已采纳
1回答
我将用另一种设计来订购一份清单。所以我在这里找到了一个。
body { counter-reset: item; }
ol.numbered_style li:before
{
counter-increment:item;
margin-bottom:5px;
margin-right:10px;
content:counter(item);
background:gold;
border-radius:100%;
color:white;
width:1.2em;
text-align:center;
d
浏览 2提问于2016-03-19得票数 1
回答已采纳
4回答
我有一个带有jQuery标签页的页面。在这些选项卡中是一个有序列表。
这是我的html代码：
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3"
浏览 1提问于2013-01-25得票数 8
回答已采纳
1回答
我在使用XPATH时遇到了问题，可能需要一些指导。我使用了w3schools教程--它还不够先进，不足以帮助我找出我做错了什么。(我预计将来需要更多地使用XPATH --因此也希望参考好的教程或书籍)。
我正在写一本有可选标题列表的书。如果使用listTitle，我想将一个列表号预先粘贴到标题中，将章节和列表编号连接起来(基于listTitle)。不包含listTitle的列表不应增加列表计数器。
下面是一个示例xml文件，显示了所需的结果：
<chapter><title>Chapter 1></title>
<para>Para
浏览 0提问于2017-04-12得票数 0
回答已采纳
3回答
我查过这些：
所以，答案都不是这些。
理论
我有两个元素，UL和OL。
列出UL的项目必须在OL中
醇是可排序的
问题
我有多个这样的UL和OL在单页。
我需要确保一个UL的列表项目不会进入其他部分的OL。
你试过什么?
$(function() {
$( ".fetchedfromdb li" ).draggable({
appendTo: "body",
helper: "clone",
drag: function(){
$(&
浏览 3提问于2013-10-10得票数 4
回答已采纳
演示：
<ol>
<li>a</li>
</ol>
<ul>
<li>b</li>
</ul>
<ol>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
ol li {
counter-increment: list-0;
list-style: none;
}
ol li:before {
content: counter(list-0,
浏览 16提问于2020-05-19得票数 5
回答已采纳
下拉单击在一个页面上工作，而不是在另一个页面上工作，即使它与这些页面加载的组件和相同的javaScript文件相同。
这是组件
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Please Select A Fa
浏览 5提问于2022-03-29得票数 1
1回答
当任何类型的列表(有序的、无序的或定义的)包含在另一个列表中时，我需要将页边距调零。所以我写了这个SCSS：
#main ol, #main dl, #main ul {
& ol, & dl, & ul { margin-bottom: 0; }
}
由此产生的CSS：
#main ol ol, #main ol dl, #main ol ul,
#main dl ol, #main dl dl, #main dl ul,
#main ul ol, #main ul dl, #main ul ul { margin-bottom: 0; }
这个像我期望的那
浏览 3提问于2013-05-30得票数 2
回答已采纳
我借用了easyPaginate的代码，并简单地添加了一个下拉功能，以调整每个页面上显示的项目数量。我的下拉列表在第一页上工作，当我点击第二页(或任何其他子页面)时，页面上的项目数量会急剧增加。
会不顾一切地想得到一些帮助。
(function($) {
$.fn.easyPaginate = function(options){
var defaults = {
step: 4,
delay: 0,
numeric: true,
nextprev: true,
auto:false,
浏览 2提问于2012-10-19得票数 0
我有以下HTML
<ol data-level="0">
<li class="active">This is the data1</li>
</ol>
<ol data-level="1">
<li class="active">This is the data2</li>
</ol>
<ol data-level="2">
<li class="active"
浏览 1提问于2013-12-04得票数 1
回答已采纳
1回答
可以根据元素的样式声明css路径吗？例如，我在页面上有两个ul元素。其中一个有style list-style-type: lower-alpha;：
<ul start="1" style="list-style-type: lower-alpha;">
第二个ul没有list-style-type风格：
<ul start="1">
我需要将css应用于ul元素，该元素具有list-style-type。如何编写这样的css选择器路径？
主要问题是我在同一页上有数字ul和较低字母的ul元素，我想在字母和数字ul中使用粗
浏览 12提问于2017-02-02得票数 2
回答已采纳
2回答
我使用的是一个子主题，在一个页面上，我希望在另一个页面上留下30页的空白。但它会影响所有的网页，我如何使它独特？
CSS：
.description.style-16 ol, ul {
margin-left: 30px;
}
.eo-events-shortcode ol, ul {
margin-left: 0; (this one will have no effect)
}
HTML：
<div class="one_third">
<div id="homeboxheader">
<h3
浏览 0提问于2014-09-29得票数 0
回答已采纳
如果我要在多个页面之间切换，如何让a选项卡在每个后续页面上保持打开/活动状态？
例如，在登录页面上，我点击“英语”的标签，然后我点击“产品”的链接，英语的标签已经在产品页面上打开了。
<ul class="nav navbar-nav" id="langTab">
<li role="presentation" class="active"><a href="#español" aria-controls="español" role="tab" dat
浏览 15提问于2017-07-18得票数 0
回答已采纳
我使用p_role方法给自定义页面名“setPageName”，因为我希望在一个页面上使用多个分页。
但是，当我设置自定义页面名($roles->setPageName('p_role');)时，呈现(twitter-引导分页)链接不起作用。
如果将默认页名" page“设置为自定义页名($roles->setPageName('page');)，则工作正常。
那么我如何在laravel 5分页中设置自定义的页面名。
AccessController.php
use App\Http\Controllers\Controller;
use A
浏览 2提问于2015-03-13得票数 1
回答已采纳
3回答
我的rails应用程序中有reset.css
ul, ol, li { list-style: none; }
但我不想让它出现在某些页面上，我想让它保持默认(默认css样式)
如何设置默认值？
我的div with list
<div class="text_blog">
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
可以是ol或ul lis
浏览 0提问于2016-06-06得票数 3
我有两组<ol> (有序列表)，我需要这些数字在每个<ol>中的最后一个<li>停止递增。我的目标是在到达最后一个<li>时重新开始递增。
例如，如果您转到并单击"list"，它将返回：
1. Hello world! :)
2. Hello how are you
3. good
- Hello world! :)
- Hello how are you
- good
4. Hello world! :)
5. Hello how are you
6. good
我希望增量不影响<ol>中的所有<ol>
浏览 2提问于2014-06-28得票数 1
回答已采纳
2回答
我有价值数千页的HTML，我无法更改，所以这个修复需要基于CSS或js。
我有.special p标记，这些标记有时在列表中(通常不是)。我需要他们的中心基于页面宽度和忽略列表缩进。
示例：
<style>
.special{
font-weight:bold;
text-align:center;
}
</style>
<body>
Here comes a list!
<ol>
<li>Blah</li>
<p class="special">Incorrect</p>
浏览 1提问于2013-09-10得票数 2
回答已采纳
我希望对页面上的所有HTML元素进行标准重置(使页边距和填充0)，但那些是..raw HTML的子元素除外。
下面是不工作的内容(甚至是使用SASS进行编译)
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
dl,dd,ol,ul,
form,fieldset,legend,
table,th,td,caption,
hr {
&:not(.raw-HTML > &) {
margin: 0;
padding: 0;
}
}
浏览 2提问于2014-11-19得票数 2
回答已采纳
2回答
我试图在文章页面上列出一个内容列表，但我的验证程序一直告诉我，<ol>和<ul>不能是另一个<ol>或<ul>的子元素。
是否有任何方法可以在不出现错误的情况下在内容中启用这一功能？
我当前的标记如下：
<!DOCTYPE html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<h2>Contents</h2>
&
浏览 2提问于2015-12-01得票数 0
回答已采纳
1回答
我有一个多页表单，每一页都包含在列表项中。这些列表项中的每一项都包含一个排序列表，列表项中包含问题。这些列表项中的每一项都包含一个无序列表，其中包含一个选择了无线电或复选框输入类型的列表。
我试图让CSS计数器在有序列表的列表项上增加。
下面是一个基本示例：
<ol>
<li>
<h1>Page 1</h1>
<ol>
<li>
<h2>Question 1</h2>
&l
浏览 4提问于2013-09-21得票数 1
回答已采纳
我需要在无序列表中显示每个列表项的数字。为此，我尝试将一个无序的ul列表标记转换为一个有序的ol列表标记(参见下面的脚本)。我需要这样做，因为我希望每个li标记的旁边都显示它的订单号。 下面是我尝试过的脚本，I found on codepen var ul = document.getElementsByClassName("productGrid")[0]
var ol = document.createElement("ol");
var li = ul.querySelectorAll('li');
for(var i=0;i<
浏览 12提问于2019-02-06得票数 1
回答已采纳
2回答
我所要做的就是在同一个页面上有多个选项卡区域，并使用JS中的一个类来处理它们。我不想手动地向JS添加单独的ID来激活选项卡。
这里有一个小提琴：
这是我的代码：
HTML
<aside id="0" class="widget tabbed popular-articles">
<header>
<h1 class="widget-title">Popular Articles 1</h1>
<a href="#" class="
浏览 4提问于2013-09-07得票数 1
回答已采纳
2回答
我正在做一个angular5/html 5项目。我有一个侧导航菜单组件，显示在我的应用程序的所有页面。问题是，这个侧导航菜单组件是动态的，如果有更多的页面被添加到应用程序中，就会自动更新。
现在我要做的是只在某些页面上隐藏这个菜单。例如，我希望在第1-5页上保持可见，隐藏在第6-8页，在第9和第10页再次可见。
这是我为侧导航菜单编辑的html代码：
<aside>
<div class="sidebar">
<nav>
<div class="sidebar__wrap">
浏览 0提问于2018-08-30得票数 4
回答已采纳
2回答
我有一份普通的清单
ul.dsgvo {
list-style-type: lower-alpha;
}
但我想将列表后的点更改为")“
目前: a.目标: a)
我已经试过了
content: counter(lower-alpha) ") ";
但这返回了0而不是低α(拉丁文也不起作用)。
名单结构：
<ol><p>
<li class="lawli">
<p>text</p>
</li>
<li class="lawli
浏览 4提问于2022-03-16得票数 0
回答已采纳
2回答
div滚动不按预期工作
、、、
所以我正在做这样的布局：
<body>
<div id="master">
<div id="sidebar">
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
</ul>
</div>
<div id="main">
<div id="content"
浏览 2提问于2014-02-07得票数 1
回答已采纳
2回答
我用ngFor创建了这个动态列表。当我点击项目时，我想用新的动态列表来展开它，但只针对该项目。在我的以下代码中，它为第一个列表中的每一项进行开销。我理解为什么会发生这种情况，但我不知道如何解决它。
以下是我的代码
<ul *ngFor="let p of portList">
<li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png
浏览 2提问于2017-03-17得票数 1
1回答
我有一个程序生成的以下html。该程序已经用额外的列表包装了列表，这导致在HTML页面上可以看到额外的项目符号。我正在尝试清理列表，以便只保留有效的列表项，而删除无关的周围列表。
我写了以下代码，它适用于list1和list2，但不适用于list3和list4。
$("body>ul, body>ol").each(
function removeExtraneousLists(index, element) {
$element = $(element);
$leafList = $element.find("ul
浏览 0提问于2020-09-08得票数 1
3回答
因此，我正在创建一个网站，其中有动态添加的内容，我想绑定点击事件到列表项目。问题是，我在列表项中有一个列表项，而我似乎无法让第二个列表项工作。
HTML
<ul id="users" class="grid">
<li>
<figure>
<img src="image source" alt="Title" />
<figcaption>
<div>
浏览 1提问于2013-10-13得票数 1
回答已采纳
我在无序列表中切换嵌套html时遇到了问题。我在用下面的代码。它切换整个div，而不是li项目，请帮助我.我希望使用html无序列表创建一个树视图，并能够创建和编辑每个创建的子节点。我希望我的输出看起来像。
$(document).ready(function () {
ListOfCategoryEquipment();
function ListOfCategoryEquipment() {
$.ajax({
url: "Handler/CommonHandler.ashx",
浏览 5提问于2014-02-26得票数 0
回答已采纳
我试图循环遍历页面上的每个ul，计数每个UL中的列表项数，然后在每个节中的每个列表项的ol标记中添加一个新的列表项。因此，对于第一部分的ol标记，应该创建三个列表项，对于第二个部分，应该创建四个列表项。
我正在处理的页面将有一个未确定的节数，每个节中的列表项的数量不同。到目前为止，我所能做的最好的就是将7个列表项(整个页面的总数)添加到每个ol标记中。
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
浏览 5提问于2014-07-06得票数 2
回答已采纳
我目前正在做一个学校项目，其中我的大部分想法都是基于单选按钮和复选框的。我发现了很多关于如何创建它们的代码，唯一的问题是我只被允许使用特定的html标签，而不允许使用jQuery。
我可以使用的标签：
·html、head、body、title、meta、link
·页眉、章节、文章、页脚
·div
·h1-h6
·第1页
·跨度
·ul，ol，li
·a
·img
·音频
有没有办法用这些标签创建复选框和单选按钮？
浏览 0提问于2017-11-17得票数 1
1回答
当打印预览时，IE9错误地缩进了<li>的编号，如果<ol>是在该页面上打印的第一个项目。数字缩进到相应的文本中，并与其重叠。这只发生在打印页面的顶部，上一个打印页面具有父ol标记，并且它将继续在下一页上打印。其余的<li>是正常缩进的。Chrome很好，但是我在IE中缺少了什么呢？是虫子吗？
浏览 2提问于2014-10-24得票数 0
回答已采纳
2回答
如何重新设置嵌套有序列表的编号。
运行这个片段，给我一个这样的输出：
清单1
清单2
清单3
1. List 1
2. List 2
3. List 3
- List 1
- List 2
- List 3 3.1.表1. 3.2.清单2. 3.3.清单3 3.3.1清单1 3.3.2清单2 3.3.3.清单3 3.3.3.1清单1 3.3.3.2清单2 3.3.3.3清单3
我想让3.1从1开始。我该怎么做？我需要使用多个计数器吗？还是一个单子就行？我不太习惯于使用css计数器。如果它是一系列嵌套有序列表，那么代码就能工作，但是当其中有一个
浏览 0提问于2019-01-30得票数 5
1回答
我需要创建一个有角度的树视图。现在我创造了一些连接这个的东西；
<ol>
<li ng-repeat="item in nodes.data" data-ng-click="getSub(item.id)">
{{item.name}}
<ul>
<li>
{{item.name}}
</li>
</ul>
</li>
</ol>
因此，我所期望的是，对于第一个有根项，当我单击它
浏览 0提问于2015-07-07得票数 1
5回答
我有一份订购单
<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>
看上去像这样：
Lorem ipsum dolor，consectetur adipisicing，sed do eiusmod temporUt enim ad minim veniam，quis更多的文本
我希望列表有列表位置:在外面，数字挂起(就像
浏览 8提问于2010-07-27得票数 6
回答已采纳
2回答
我在MVC4项目的.cshtml页面上有一个剃刀循环，我需要在这个剃刀循环中显示隐藏列表的子项。代码适用于第一个元素，但不适用于其余元素。
.cshtml代码
<ol>
@foreach (var Name in (List<string>)ViewData["Names"])
{
<li onclick="makevisible();" ondblclick="makeinvisible();">
@Name
<ul id=
浏览 0提问于2013-03-20得票数 0
我在页上有bbcode：
[list=1]
[*]Камиль [/*]
[*]Хисматуллин [/*]
[*]живет в настоящий [/*]
[/list]
如何将这些bbcode替换为HTML标记：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
我尝试了正则表达式：
$advanced_bbcode = array(
'#\[list=([0-9]?)](.+)\[/list]#Usi',
'#\[*](.+)
浏览 1提问于2015-04-03得票数 0
回答已采纳
我在使用jQuery UI选项卡时遇到了一些问题。我正在使用默认的选项卡标记，并且希望在我的选项卡内容中显示一个列表。如下所示：
<div id="tabs">
<ul>
<li><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</a></li>
</ul>
<div id="tab1
浏览 0提问于2011-08-02得票数 0
1回答
执行函数的浏览器扩展弹出窗口
、、、、
我正在构建一个简单的firefox扩展。它包含一个带有按钮(#showList)的弹出窗口，我想用它来执行一个函数(addListBorders())。此函数用于向页面上的列表元素添加边框。
执行此函数的正确方式是什么？
var ext = false;
var $ulList = document.querySelectorAll('ul')
var $olList = document.querySelectorAll('ol')
var $dlList = document.querySelectorAll('dl')
function
浏览 9提问于2020-02-26得票数 0
由于某些原因，我不确定这是在约克里斯托弗保里尼的书显示使用的子弹点，而不是下罗马数字。有人知道怎么回事吗？
<ol class="list">
<li>Books
<ul class="list">
<li>Any thing by Mathew Riely</li>
<li>Alex Rider series</li>
<li>Christopher Paolini
&
浏览 7提问于2011-04-06得票数 1
3回答
为什么嵌套的<ol>列表项会收到sqpurple.gif项目符号？
ul > li {
list-style: outside url("https://www.w3schools.com/cssref/sqpurple.gif") disc;
}
<ul>
<li><ul> - parent
<ol>
<li><ol> - parent. Shouldn't this be a number?</li>
浏览 2提问于2021-07-16得票数 1
我必须在项目中验证HTML字符串，
我有一个包含以下内容的html：
<ul>
<li>Test 1</li>
<ol>
<li>Test 2</li>
</ol>
<li>Test 1</li>
</ul>
所需输出为：
<ul>
<li>Test 1</li>
</ul>
<ol>
<li>Test 2</li>
浏览 0提问于2015-07-18得票数 1
我正在编写一本包含许多嵌套列表(包括OL和UL)的电子书，其中一页无效。出于语义和组织上的原因，我希望将它们保留为清单。这是我想要的格式：
问题
- Subquestion
- Subquestion
解释答案的段落
问题
- Subquestion
- Subquestion
解释答案的段落
H2断口
问题
- Subquestion
- Subquestion
解释答案的段落
问题
- Subquestion
- Subquestion
解释答案的段落
我的简写代码是：
<ol>
<li>Que
浏览 6提问于2014-11-03得票数 1
回答已采纳
1回答
使用<ol>，我有一组嵌套的相关主题/子主题。到目前为止，我的CSS从树的顶部开始工作得很好，但是用户可以单击子主题，我正在重新绘制嵌套的<ol>集，从用户单击的位置开始。我的问题是，我需要尊重章号，等等。
因此，如果典型的结构可能是这样的：
Vehicles
1. Automobile
1.1 Street
1.1.1 Sedan
1.1.2 Coup
1.1.3 Truck
1.2 Race
1.2.1
2. Rail
2.1 Locomotive
2.2 High Speed
浏览 5提问于2016-05-15得票数 5
回答已采纳
2回答
这可能看起来像一个愚蠢的问题，但我在一个基本页面上添加了一个UL，列表似乎偏离了中心。这份清单没有什么特别之处。没有添加特定的css :只是一个列表。当我加载实况时，它会稍微偏离中心。
左边是否有默认的页边距或填充？
<h3>Title Heading</h3>
<ul id="listItems">
<li>itemOne</li>
<li>itemTwo</li>
<li>itemThree</li>
</u
浏览 1提问于2015-05-24得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
