使用 CSS 替换 ul 项目符号点样式

2023-12-31

我想替换 ul 列表的列表样式类型属性,以便外部是一个圆盘,然后一个内部 ul 列表是一个圆,再一个内部是一个圆盘,依此类推。

本质上,我想要的是这样的:

<ul><!-- use disc -->
  <li>Lorem ipsum</li>
  <li>
    <ul><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

我如何使用 CSS 来实现这一点?


像这样...

li { list-style: circle; }
li li { list-style: disc; }
li li li { list-style: square; }

等等...

第一级列表项将具有“圆形”类型标记。第二个(嵌入式)将使用“光盘”。第三级将使用正方形。

只需采用上面的 CSS 并更改list-style以满足您的需求。您可以找到以下列表list-style在这里输入:http://www.w3schools.com/cssref/pr_list-style-type.asp http://www.w3schools.com/cssref/pr_list-style-type.asp

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS 替换 ul 项目符号点样式 的相关文章

  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 为什么inline-block元素出现在inline元素的下方?如何让它们出现在同一行?

    我目前正在尝试理解基本的 HTML 和 CSS 概念 并遇到了一个非常奇怪的问题 我有两个元素 一个具有 display inline 另一个具有 display inline block 我正在尝试创建一个列表 类似的东西1 SOME C
  • 如何使用 Cypress 定位没有 id 属性的嵌套输入?

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

随机推荐

  • 如何从单列中获取值的组合?

    我正在尝试从 BigQuery 中的单列获取不同的可能组合值 假设我有这张表 date type payment customer no status 2019 01 02 Shirt Cashless 101 Cancel 2019 01
  • 在哪里放置 OBB 文件以在 Nexus 4 上测试 Android 扩展包文件 (OBB)?

    我正在尝试按照此处的指南测试 Android 中的扩展包文件 OBB http developer android com google play expansion files html http developer android co
  • 如何在 Android 平板电脑 Chrome 中隐藏工具栏以获得 100% 高网站

    我正在尝试制作一个 100 屏幕宽度和 100 屏幕高度 长宽比为 16 9 的 Web 应用程序 如果我能够在平板电脑上全屏查看该网站 那就太棒了 但不幸的是 屏幕上的工具栏占用了大量空间 使我的网站既不能以全高也不能以全宽显示 现在我知
  • 在项目中使用 ShareKit 时,本地化字符串并不总是有效

    因为我从我的应用程序中删除了一些本地化 所以我遇到了这个问题 第一次加载我的应用程序时 我在标签中看到我的密钥的本地化字符串 第二次加载应用程序时 出现 xxxxxkey 下次加载应用程序时 一切都很好 显示本地化字符串 怎么会这样 如果有
  • 如何在 Swift 包管理器中添加本地库作为依赖项

    如何在 Swift 包管理器中添加本地库 a 文件 作为依赖项 我尝试在我的 Package swift 中添加 dependencies Dependencies declare other packages that this pack
  • Google SignIn 在应用程序中,无需将其添加到设备帐户中

    我们一直通过 WebView 使用 Google 登录 但由于 Google 很快就会弃用此功能 是否有其他替代方法可以做到这一点 我们有一个稍微特殊的用例 我们的设备在仓库中使用 并且一台设备由多个用户使用 我们不希望所有用户将他们的帐户
  • UIBarButtonSystemItem PageCurl 不随工具栏改变颜色

    我想改变导航栏和工具栏的颜色 但是卷页系统图标的颜色UIBarButtonSystemItemPageCurl不随工具栏色调颜色改变 如果我使用书签等其他系统图标 它们会改变 有人有解决此类问题的方法吗 我使用以下几行来更改导航栏和工具栏的
  • 如果访问X86系统中不存在的物理地址怎么办?

    我正在开发一个 Linux 内核模块 它通过处理进程的页表将物理地址范围映射到进程虚拟地址空间 然后 我脑子里有一个问题 如果PTE指向一个不存在的物理地址会发生什么 例如 我的 X86 笔记本电脑有 8GB DRAM 如果 PTE 的值为
  • Flexbox div 不占据整个宽度

    我试图理解如何display flex有效 但每当我设置它时 孩子们都不会占据整个宽度 我预计三个 div 会占据屏幕宽度的 33 我究竟做错了什么 flexbox display flex flexbox div border 1px s
  • 创建一个 DateTimeOffset,设置为与服务器不同时区的午夜

    我有一个设置为 EST 的服务器 我想知道我需要做什么来创建设置为当天午夜但在不同时区的 DateTimeOffset 例如太平洋标准时间 获取相关的TimeZoneInfo 构造一个DateTime其中包含local时间 即午夜 Call
  • C++(11):如果两者都很好,何时使用直接初始化或复制初始化

    在重复的呼喊开始之前 我知道以下问题 以及其他一些问题 与此问题非常相关 在 C 中 复制初始化和直接初始化之间有区别吗 https stackoverflow com questions 1051379 is there a differ
  • 使用 android 捕获按键

    如何使用 android SDK 捕获手机按键 我已经环顾了几个小时没有找到任何东西 例如 在某些情况下 我想在用户按下手机上的 挂断 按钮时捕获消息 然后在消息到达操作系统之前将其丢弃 这可能吗 您可以处理视图中的关键事件 也可以处理整个
  • C 中 read() 和 fgets() 之间的区别

    我想从标准输入流中读取数据 使用 read 或 fgets 从 stdin 流读取有什么区别吗 我用 fgets 附加了以下两段代码并阅读 有了fgets 我可以使用java程序轻松地编写和读取c程序 通过读写 我的 java 程序挂起 等
  • 如何一次将多个值分配给一个结构体?

    我可以在 Foo 结构体的初始化中执行此操作 Foo foo bunch of things initialized 但是 我不能这样做 Foo foo foo bunch of things initialized 那么 两个问题 为什么
  • 如何使用 React.js 在 Botframework v4 聊天应用程序中执行发送“打字指示器”?

    我正在使用 botframework v4 构建一个聊天应用程序 以 React js 作为前端 以 net core 作为后端来生成令牌 我想使用 React 在我的聊天中实现 Typing 指示器 尝试使用 window WebChat
  • Ubuntu 上的 rpy2 安装

    我对 Linux 还很陌生 在安装 Rpy2 时遇到了一些严重的问题 我通过突触包管理器安装了旧版本的 Rpy2 但我需要更新版本并将其删除 如 Rpy2 文档中所述 Rpy2 目录中的所有文件 我下载了tar gz 来自 SourceFo
  • 如何使用 Timer 创建时钟?

    我正在尝试创建一个七段显示 它使用计时器以及 ActionListener 和 actionPerformed 自动移动 我认为如果我使用 for if 语句 它会自动从 0 循环到 2 并为每个数字段设置背景颜色 但是 当我显示它时 它停
  • HtmlAgility:没有出现任何内容(C#,UWP)

    我尝试使用 htmlagilitypack 来解析表格 完成后我意识到我忘记证明 htmlagility 部分是否有效 很明显它不起作用 我也不知道我错过了什么 我在哪里做错了 因为我是初学者 所以请不要对我太严厉 public parti
  • 获取资源错误

    每次我在主要活动中调用 getResources 时 都会导致错误并且应用程序被迫退出 如果我调用 getApplicationContext getResources 甚至在 Eclips 中的全新项目中也会发生这种情况 在通话之前我需要
  • 使用 CSS 替换 ul 项目符号点样式

    我想替换 ul 列表的列表样式类型属性 以便外部是一个圆盘 然后一个内部 ul 列表是一个圆 再一个内部是一个圆盘 依此类推 本质上 我想要的是这样的 ul li Lorem ipsum li li ul li Lorem ipsum li