使用 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 项目符号点样式 的相关文章

  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • iPad 上的网站纵向视图

    我的网站在 iPad 纵向模式下无法正确显示 它在横向模式下看起来不错 但当我将其转换为纵向模式时 我最终会得到一个混乱的网站 所有元素都分散在整个网站上 我怎样才能解决这个问题 请帮我 这是我网站的链接 inclouds co uk ht
  • AJAX 加载的图像在 Safari 中无法正确显示

    因此 我使用 AJAX 加载每个页面的内容并将其注入当前页面 在 Chrome Firefox Internet Explorer 上一切都运行良好 尽其所能 哈哈 并且除了两个奇怪的部分之外 内容在 Safari 上加载良好 通过 AJA
  • 将图像原始尺寸保留在较小的 div 内

    我有一个 600x400px 的图像 并希望将其放在尺寸为 240x200px 的较小 div 内 但图像缩小或扭曲 我希望原始尺寸的图像集中在较小的 div 中 这会隐藏一些图像 我编写了这个 CSS 规则来应用于不同的图像尺寸 theB
  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0
  • 如何使用 CSS 绘制一个向左的三角形?

    我已经很久没有建造这个向上的三角形了 我怎样才能改变我的 CSS 使角指向左边 http jsfiddle net 3sP8q http jsfiddle net 3sP8q left corner width 0 height 0 bor
  • Chrome 中的混合混合模式问题

    我一直在尝试在包含 css 不透明度过渡实例的页面上使用混合混合模式 似乎正在发生的情况是 包含 mix blend mode 的 div 在过渡期间 或者更确切地说 在动画进行过程中 显示得与没有混合模式时一样 我只发现这是 Chrome
  • 使用 jquery 触发 css3 关键帧

    我写了一个关键帧动画 webkit keyframes cubemove 0 webkit transform translateZ 194px rotateY 0deg 20 webkit transform translateZ 194
  • 使用 Flexbox 时 Apex 图表无法正确调整大小

    最近 我将 Floats 更改为 FlexBox 以便更轻松地使用面板 正如我在其他问题上所建议的那样 虽然大多数事情都按我的预期工作 但更改后我在使用 Apex Charts 时遇到了问题 完整代码在这里 https github com
  • 不透明动画在 IE 上不起作用

    我有一个动画菜单 其中包含一些级联不透明动画 这些动画在打开菜单和悬停每个按钮时执行 它只是每 100 毫秒向菜单上的每个图标添加 colorHigh 类 你可以看到一个现场演示在这里 http germanalvarez net 5 la
  • BEM 与 SASS 和 :hover

    使用 BEM 和 SASS 声明活动 焦点 悬停状态的正确方法是什么 例如 我有这样的结构 div class card img class card image src alt div class card overlay div cla
  • Bootstrap“navbar-brand”导致“navbar-nav”项目从导航栏中的中心位置向右移动?

    我正在尝试创建一个导航栏 其左侧有 品牌 LOGO 而实际的导航项目位于整个栏的中心 我正在使用默认的 Bootstrap 导航栏 因为我一周前才开始学习 Web 开发 到目前为止 情况是这样的 但是 您可以看到导航项稍微移动到页面实际中心
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • 这个 jQuery 选择器中的“>”是什么意思?

    大于号 gt 在这里制作 Is someElement find gt someAttribute 与 someElement find someAttribute 否 它仅选择一个元素 如果它是以下元素的直接子元素 someElement
  • 如何使 Twitter bootstrap 模式全屏

    div class modal hide fade div class modal body div div 如何为上面的代码制作一个 Twitter 引导模式弹出全屏 我尝试使用 css 但无法按照我想要的方式得到它 任何人都可以帮我吗
  • 使用 CSS 和 JQuery 创建组织结构图结构

    I was checking on stack forum Trees in Twitter Bootstrap https stackoverflow com questions 11167628 trees in twitter boo
  • 如何使用鼠标单击选择多个项目?

    This is the default jQueryUI display as a Grid Layouts demo here http jqueryui com demos selectable display grid I can s
  • 四列布局,无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询
  • 打印html时在页面上打印页码

    我读过很多关于打印页码的网站 但当我尝试打印它时 我仍然无法让它显示在我的 html 页面上 所以 CSS 代码如下 page margin 10 top center font family sans serif font weight
  • 是否可以通过样式表进行跨域攻击?

    我需要为我的 Web 应用程序的用户创建的网页实现灵活的样式系统 理想情况下 我希望允许他们使用 CSS 正在链接到用户定义的 url 处的样式表Bad Idea Why 可以安全地做到这一点吗 您对此有何看法 我试图避免构建样式 编辑器

随机推荐

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

    我正在尝试从 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