如何只设置有序列表项的样式？嵌套在其中的非无序列表项
在HTML中，我们可以使用CSS来设置有序列表项的样式。具体而言，我们可以使用list-style-type属性来指定有序列表项的样式。
有序列表项的默认样式是数字（1, 2, 3...），但我们可以通过设置list-style-type属性来改变它的样式。以下是一些常用的有序列表项样式：
- 数字样式（默认）：
list-style-type: decimal; - 小写字母样式：
list-style-type: lower-alpha; - 大写字母样式：
list-style-type: upper-alpha; - 小写罗马数字样式：
list-style-type: lower-roman; - 大写罗马数字样式：
list-style-type: upper-roman;
如果我们想要嵌套在有序列表中的非无序列表项具有不同的样式，可以使用CSS选择器来选择特定的列表项。例如，我们可以使用ul ul li选择器来选择嵌套在有序列表中的非无序列表项，并对其应用特定的样式。
以下是一个示例代码，演示如何设置有序列表项的样式以及嵌套在其中的非无序列表项的样式：
<ol>
<li>有序列表项 1</li>
<li>有序列表项 2
<ul>
<li>非无序列表项 1</li>
<li>非无序列表项 2</li>
</ul>
</li>
<li>有序列表项 3</li>
</ol>ol {
list-style-type: decimal;
}
ul ul li {
list-style-type: circle;
}在上面的示例中，有序列表项使用默认的数字样式（list-style-type: decimal;），而嵌套在其中的非无序列表项使用圆圈样式（list-style-type: circle;）。
对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体品牌商，建议您访问腾讯云官方网站或进行相关搜索以获取更多信息。
相关·内容
4回答
使用css格式化ol标记中的li标记
html、css、styles、html-lists
我想要编写一个样式表，它将使任何ol元素中的li元素在轮廓样式中编号：
顶级li元素使用大写罗马数字，下一级使用大写字母，下一级使用小写罗马数字，然后使用小写字母，并且在第五级使用小数。
这是我的尝试，但结果是所有级别都显示为上罗马样式。
提前谢谢你。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ol > li {list-style: upper-roman}
ol &
浏览 2提问于2013-07-07得票数 1
回答已采纳
2回答
由于CSS，ordered上的罗马数字不起作用
html、css、html-lists、css-counter
我一直在寻找一种方法来创建一个嵌套的有序列表，其中的数字如下
1.
1.1
1.2
2.
2.1
2.2
我让它在小提琴上工作。
问题是，当我将ol的类型改为罗马数字type="I"时，因为我添加了CSS，所以它不起作用。
<ol type="I">
<li>Elemento primero
<ol type="I">
<li>Subelemento primero</li>
<
浏览 0提问于2015-11-28得票数 0
1回答
如何从样式表类HTML中提取特定样式
html、css、stylesheet
我有一个任务，其中有一部分我需要创建一个简单的有序列表使用一个“大纲”类从包括的样式表。另外，我需要一个只有默认样式的有序列表。
到目前为止，这就是我所拥有的，然而，无论我如何改变样式，这两个列表仍然用罗马数字编号。我认为我的语法有些偏离了，但无法在网上找到解决方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 1 - First Page</title>
浏览 1提问于2016-06-07得票数 1
回答已采纳
4回答
将<ol>与列表样式类型: disc；和<ul>一起使用有什么区别
html、css、html-lists
共享示例代码段。从视觉上看，<ul>和<ol>看起来是一样的。那么为什么我们需要单独的<ul>呢？
<head>
<title>Change Numbering Type in an HTML Unordered List Using CSS</title>
<style>
ol {
list-style-type: disc;
}
</style>
</head>
<body>
<
浏览 4提问于2021-11-14得票数 0
2回答
在kramdown中的三层嵌套列表
markdown、github-pages、kramdown
我一直试图创建如下所示的嵌套列表(带有kramdown，用于GitHub页面)，但是HTML并不是语义性的；第2层列表使用段落而不是列表元素，第3层列表项使用代码块。
1. Do something.
2. Do something else.
a. If the reverse-Pi separation gauge is set to `OFF` you can follow
the following procedure.
i. Use the flux capacitor on Mondays, Tuesdays and Thursdays,
浏览 4提问于2015-06-12得票数 4
回答已采纳
4回答
以ol li ol li为目标，使用css嵌套列表
html、css
我有这个html
<div class="multiple">
<ol>
<li>Ordered List Style</li>
<li>Here’s another, they shouldn’t be too terribly long, but might wrap a line or three
<ol>
<li>nested</li>
<li>nested</li>
<
浏览 2提问于2013-08-29得票数 0
2回答
<ol>列表项上的样式设置命令
html、css、html-lists
我在处理CSS列表方面是个后来者。我已经使用这段代码创建了列表，其中第一个缩进是a-z，第二个缩进是roman、i、ii、iii、iv等：
/* SF/2013-10-16; this code will create 1.a.i structure similar perh. to a legal document.. */
ol > li > ol {
list-style-type: lower-alpha;
}
ol > li > ol > li > ol {
list-style-type: lower-roman;
}
但我想知
浏览 0提问于2013-10-17得票数 2
2回答
无法获得第一个嵌套订单列表html
html、css
所以我试着在这个网站和谷歌上寻找答案。我发誓，我有正确的想法“关闭”每一份订购单，相应地：
ol {list-style-type: upper-roman; }
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}
div.pro {background-color: pink;}
div.pale {color: white; background-color: blue;}
div.meso {background-color: green;}
div.ceno {color: white
浏览 1提问于2020-10-01得票数 1
回答已采纳
2回答
使用CSS #Part II在HTML中自动生成编号列表
html、css
在中，我一直在使用CSS为<li></li>标记创建自动生成的列表编号。在另一个任务中，我需要创建另一个列表，在列表之间有标题，如下图所示。
上面的例子可以使用下面的代码来实现
<ol class="main">
<span class="title">Title</span>
<li>
Content
</li>
<li>
Content
</li>
<sp
浏览 1提问于2013-05-15得票数 1
回答已采纳
2回答
IE8的IE7中的子选择器问题
css、internet-explorer-8、internet-explorer-7、css-selectors
我有一个在HTML页面中使用子选择器的CSS样式，如下所示：
<html>
<head>
<title>MSO Bug</title>
<style type="text/css" media="screen,print">
ol{list-style-type:decimal;}
ol > ol {list-style-type:lower-alpha;}
ol > ol &g
浏览 0提问于2010-05-12得票数 5
回答已采纳
1回答
CSS属性选择器和区分大小写的“类型”属性与组合属性
html、css、css-selectors、html-lists、case-sensitive
我试图根据OL的类型属性来设计OL。所有ULs和OLs的列表样式属性以前都被另一个CSS样式表删除了，我不能真正修改它，我需要重新格式化列表样式，考虑到类型，即OL是否应该使用罗马字符或字母数字等等。
这很简单，我想，我只需要使用属性选择器来根据类型属性值来定位OLs。属性选择器是区分大小写的，所以这应该很容易，对吗？
错误--至少在尝试使用标准的"type“属性时是这样的。
下面是一个示例(该示例有效)：
/* Remove default list style */
ul, ol { list-style:none; }
/* This works, using a non-
浏览 1提问于2018-11-01得票数 8
回答已采纳
3回答
由于某些原因，我不确定这是在约克里斯托弗保里尼的书显示使用的子弹点，而不是下罗马数字。有人知道怎么回事吗？
<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
1回答
使用属性值的CSS列表样式类型
javascript、jquery、html、css、stylesheet
我有一些像这样的html元素
<div class="col-md-3">
<div class="olListPallette" data-numberStyle="counter(count, lower-alpha) '. '">type1</div>
</div>
<div class="col-md-3">
<div class="olListPallette" data-numberStyle='c
浏览 1提问于2014-07-17得票数 1
2回答
“在此上下文中，<ul>不允许作为元素<ol>的子元素”
css、html、tags、html-lists
我试图将无序和有序的混合列表与下面的示例完全相同：
验证器给出了以下错误：
错误:元素“ul”在此上下文中不允许作为“ol”元素的子元素。
这是我的代码：
ol.numberlist{
list-style-type: decimal;
}
ul.sqaredotlist{
list-style-type:square;
}
ol.romanlist{
list-style-type:lower-roman;
}
<ol class="numberlist">
<li>An n
浏览 0提问于2019-03-21得票数 2
4回答
奇怪的子弹点风格-我怎么才能让它们变得正常？
html、css、wordpress
我的Wordpress主题，风格要点可怕(他们看起来应该是可扩展的！)
http://79.170.44.112/activate-enterprise.co.uk/kiryoku-leadership-programme/
我需要在css上添加/删除哪些内容才能将它们恢复到正常样式？
下面是我样式表中的列表代码：
ol {
list-style: decimal;
margin: 0 0 18px 1em;
}
ol li {
list-style: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lo
浏览 7提问于2014-09-05得票数 1
回答已采纳
3回答
我可以使用CSS在子列表中继续编号吗？
html、css、html-lists
我希望使用以下HTML样式，以便章节编号按顺序1、2、3排列，即使第三个数字位于与前两个不同的列表中。
<!DOCTYPE html>
<title>Continued Numbering</title>
<style>
ol.book-contents li {
list-style-type: upper-roman;
}
ol.book-contents ol li {
list-style-type: decimal;
}
</style>
<ol class="book-co
浏览 8提问于2021-12-23得票数 1
回答已采纳
7回答
你能用CSS来统计一个特定的类吗？
html、css、html-lists、css-counter
假设我有一个简单的列表，如下所示：
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count"
浏览 2提问于2014-11-10得票数 32
2回答
我怎样才能将第二级子级的样式与第一级子级的样式不同？
html、css
我希望第二级ols具有大写字母列表样式，而第一级ols具有大写罗马字母。我尝试使用子组合器，我认为更具体的样式会覆盖不那么具体的样式，但情况似乎并非如此。这是一个赋值，所以我不能改变HTML给第一级ol一个ID，它必须通过CSS完成。我想我在这里遗漏了一些关于子组合器的工作原理。
#outline > ol {
line-height: 2em;
margin: 0px 5px;
list-style: upper-roman;
}
#outline > ol > ol {
list-style: upper-alpha;
}
<nav id=&#
浏览 2提问于2022-10-13得票数 0
回答已采纳
我试图使我的有序列表成为罗马数字，而不仅仅是数字，但我不确定样式应该去哪里。
const names = ["Name1", "Name2"];
let nLen = names.length;
let text = "<ol>";
for (let i = 0; i < nLen; i++)
{
text += "<li>" + names[i] + "</li&
浏览 6提问于2022-10-24得票数 -2
1回答
设计无序列表和填充物时的怪异之处:0
html、css、html-lists
我知道这应该是HTML/CSS 101，但我遇到了一个奇怪的问题，我不明白。我正在更新一个旧网站，有很多无序列表。结果，每当填充设置为0时，无序列表的显示“标记”就会消失。
问题是CSS设置*{padding: 0; margin: 0;}，我现在要删除它，每个
这是我的问题。为什么padding: 0会导致无序列表“标记”的显示消失？
请参阅
<div> List of Stuff:
<ul class="circle" >
<li>Apples</li>
<li>Bumb
浏览 1提问于2015-05-23得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
