首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用CSS列表计数器的父级和子级列表样式类型不同的问题

是由于CSS中的列表计数器是基于父级元素的,而不是子级元素。因此,如果想要父级和子级列表样式类型不同,需要对父级和子级分别设置不同的样式。

父级列表样式可以通过设置list-style-type属性来改变,默认值为disc,可以改为其他值,如circlesquare等。例如,可以使用以下CSS代码将父级列表样式改为圆圈:

代码语言:txt
复制
.parent-list {
  list-style-type: circle;
}

子级列表样式可以通过设置list-style-type属性来改变,同样可以使用不同的值。例如,可以使用以下CSS代码将子级列表样式改为方块:

代码语言:txt
复制
.child-list {
  list-style-type: square;
}

这样,父级列表和子级列表的样式类型就可以不同了。

关于CSS列表计数器的更多信息,可以参考腾讯云的CSS文档:CSS列表计数器

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android BaseQuickAdapter3.0.4版本二列表使用及遇到问题

——《微卡智享》 本文长度为3942字,预计阅读9分钟 前言 前阵子做新产品用使用BaseQuickAdapter中basemultiitemquickadapter来实现二列表,网这个相关资料也挺多...,使用版本是2.9.4,在使用中发现当二列表展开时对子列表数据进行操作后,列表中展开闭合显示数据会异常。...因为当时项目比较急,3.0版本用法原来完全不一样了,加上这个问题不大,所以就没再处理,现在抽出空来就想试试3.0版本实现方式,毕竟作者说3.0使用kotlin重写了不少,并解决了一些2.0版本中...get() = null } Head列表继承自BaseExpandNode,其中要定义其明细列表MutableList class Head : BaseExpandNode...get() = Bodys } 03 adapter适配器 DataAdatper适配器继承自BaseNodeAdapter,使用NodeProvider将一列表Head列表Body分开写,代码看起来也方便些

2.9K30
  • CSS魔法堂:一起玩透伪元素Content属性

    初识伪元素  说起伪元素我第一想到莫过于::before::after这两个了,它俩其实就是在其附属选择器命中元素上插入第一个节点追加最后一个节点。...:first-line:只能用于块元素。用于设置附属元素第一个行内容样式。...:first-letter:只能用于块元素。用于设置附属元素第一个字母样式。...自定义计数器  HTML为我们提供ul或olli来实现列表,但如果我们希望实现更为可性化列表,那么该如何处理呢?content属性counter类型值就能帮到我们。 <!...通过counter-reset来定义重置计数器,通过counter-increment来增加计数器值,然后通过counter来决定使用哪个计数器,并指定使用哪种样式

    71631

    寒假提升 | Day7 CSS 第五部分

    盒子模型-margin折叠 13-盒子模型-margin折叠 父子之间 14-块水平居中问题 15-外轮廓 16-盒子阴影 17-文字阴影 18-行内非替换元素特殊性 19-前景色背景设置哪些...,那么这个块元素margin-top值会传递给元素 margin-bottom传递:当块元素底部线元素底部线重叠,那么这个块元素margin-bottom值会传递给元素 折叠:...列表元素 列表实现方式 事实上现在很多列表功能采用了不同方案来实现: 方案一: 使用div元素来实现(比如汽车之家, 知乎上很多列表) 方案二: 使用列表元素, 使用元素语义化方式实现;...事实上现在很多网站对于列表元素没有很强烈偏好,更加不拘一格,按照自己风格来布局: 原因是列表元素默认CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多限制, ul/ol中只能存放...(1) :last-of-type,等同于:nth-last-of-type(1) :only-child,是元素中唯一元素 :only-of-type,是元素中唯一这种类型元素 下面的伪类偶尔会使用

    1K10

    css学习笔记,持续记录。

    粘性定位sticky 粘性定位sticky是fixedrelative结合,例如top:0,不为0是为relative,当距离元素顶部为0是转换为fixed,存在兼容性问题; div.sticky...@media screen  @media screen @media print and (max-width:720px),定义不同媒体类型、大小下不同样式; 11....CSS 计数器 CSS 计数器根据规则来递增变量,CSS 计数器使用到以下几个属性: counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content...解决当元素没有高度时,元素浮动会使元素高度塌陷问题 解决元素外边距会使元素塌陷问题 42. ul list-style失效 默认情况下ul下li都会自带一个列表样式,如果个ul...inherit:将使用 pointer-events 元素值。

    2.7K60

    『知识巩固#1』Html、Css基础整理

    行高 = 上间距 + 文本高度 + 下间距 应用 单行文本垂直居中 可以设置为line-height: 文字元素高度 注意点 如果同时设置了行高font连写,注意覆盖问题 font: style...从父元素处继承;元素有的,不继承 可以理解为 元素样式先赋给元素 元素自己样式又赋给自己 后者覆盖前者 故显示元素样式 层叠性 给同一个标签设置不同样式 → 此时样式会层叠叠加 →...会共同作用在标签上 给同一个标签设置相同样式 → 此时样式会层叠覆盖 → 最终写在最后样式会生效 当样式冲突时,只有当选择器优先相同时,才能通过层叠性判断结果 优先 最复杂 css三大特性...优先介绍 不同选择器具有不同优先,优先选择器样式会夫噶优先级低样式 优先公式 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !...合并现象 相邻两个盒子,margin-bottom margin-top 会合并 取最大值 而不是相加 塌陷现象 发生在互相嵌套块标签 给元素添加margin值,会使标签子标签都下移,

    4K20

    【译】CSS列表,标记,计数器

    本文,会首先讲解CSS列表,然后把目光转移到CSS列表规范中一些有趣特性——标记计数器。 在CSS中,列表具有特定属性,为我们提供了标准列表样式。...这会生成一个带标记盒子盒子,而标记盒子中放有列表项符号。 列表很早就在CSS规范中定义了,而我们目前所使用列表特性绝大部分来自CSS2规范。...主块盒子是元素主要盒子,其包含了列表所有节点,包括节点中标记符。然后,标记盒子相对于主块盒子排列。...CSS列表Level 3规范:::marker计数器CSS2.1规范中display部分扩展并阐明了列表基本行为,然而,还有一个规范详细定义了列表样式—— CSS Lists Specification...接着子项设置为(1.1, 1.2)以及子项设置为(1.1.1,1.1.2)等等。现在可以使用更多计数器功能来实现此目的。

    1.2K30

    5分钟快速回顾HTML CSS

    即使通过css设置宽度width,也会占一行位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题 块元素居中问题...span(无语义) 超链接标签 a src可以为空,但一定要写 其它常见问题 内联元素之间有间隙,可以把元素font-size设置为0,单独设置font-size 内联元素居中...:由于内联元素自身不支持width,使用元素设置text-alian : center 解决方案 3.内联块元素(支持全部样式内联元素) 转换为内联块 设置样式 display:...元素已经脱离了文档流 定位四种方式同相对定位 如果子元素找不到元素,则会一直向上找,直到找到最外层标签页面 3.固定定位(相对于浏览器定位) 元素css设置 position: fix...相邻浮动块元素可以并在一行,超出元素会自动换行 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动元素会占据浮动元素位置,没有浮动元素内文字会避开浮动元素

    1.3K90

    CSS总结

    一、CSS特性   1.继承:元素继承元素某些样式(因为有些元素有默认值,所以它们就不用继承元素)。    ...(注:button、input、select、textarea在IE下是不继承body属性,需要单独写)。   2.层叠:元素如果定义了与元素一样样式,就会覆盖元素样式。...优点是不再单独为元素包含元素进行设置id使得css代码更加简化,优化了css代码!...而且还不同,所以我们需要首先将所有的浏览器内外边距默认值都设置为零,css属性虽然有继承特点,但是并不是所有的属性都能继承。   ...并且一般把ulol边框list-style属性设置为none; 五、列表使用语法   list-style:list-style-image(列表图片)  list-style-position

    2.1K10

    让我们学会使用 CSS 计数器

    什么是CSS计数器   计数器css3提供一个强大工具,是一种可以让我们使用CSS给元素自动编号方法。使用它可以很方便对页面中任意元素进行计数,实现类似于有序列表功能。...:属性用于定义初始化一个或多个CSS计数器。...counter() 函数 counter()函数必须content属性一起使用,用来显示CSS计数器。...嵌套计数器是用于为嵌套元素(如嵌套列表)提供自动编号。如果你要将计数器应用于嵌套列表,则可以对第一项目进行编号,例如,1,2,3等。第二列表项目将编号为1.1,1.2,1.3等。...第三项目将是1.1.1,1.1.2,1.1.3,1.2.1,1.2.2,1.2.3等。 string参数用作不同嵌套级别的数字之间分隔符。

    1.3K30

    59道CSS面试题(附答案)

    (4)改变样式 link标签是DOM元素,支持使用 JavaScript控制DOM修改样式;@ import是种方法,不支持控制DOM修改样式。 3、浮动元素引起问题和解决方法是什么?...因为浏览器兼容问题不同浏览器对有些标签默认值是不同,如果没有初始化CSS,往往会导致页面在不同浏览器之间出现差异。...list-item是指像块类型元素一样显示,并添加样式列表标记。...解决方法是给添加 position:relative (5)PNG图片半透明问题。...使用rgba给元素背景设置透明度方式,来替代使用opacity设置元素透明度方式,解决元素继承元素透明度问题。 56、CSS中,自适应单位都有哪些?

    5K50

    CSS面试题总结

    如果一个块元素没有设置height,那么其高度由元素撑开,如果子元素使用了浮动,脱离了标准文档流,那么元素高度将不能被其撑开。表现出高度塌陷现象。...清除浮动方式: 元素定义height。 但这样定死高度,往往不是我们想要结尾处添加一个空div,设置css样式clear:both。...原理:添加一个空 div,利用 css 提高 clear: both 清除浮动,让 div 能自动获取到高度。 定义伪元素:afterzoom(推荐使用)。...ie6,ie7浮动问题 div添加css属性:overflow:hidden (7) position 、float display 取值各自意思用法 position 属性取值...因为浏览器兼容问题不同浏览器对有些标签默认值是不同,如果没对css初始化,往往会出现浏览器之间页面显示出现差异。 (15) 说说你对边距折叠理解?

    83610

    CSS】378- 44个 CSS 精选知识点

    使用transform居中子元素 使用 position:absoluteandtransform:translate() 进行居中,不需要知道元素宽高,因此它非常适合响应式应用程序。...可在 CodePen 上查看真实效果编辑代码 浏览器支持程度 97.7% caniuse 15. 列表计数器 计数器本质上是由CSS维护变量,其值可以通过CSS规则递增以跟踪它们被使用次数。...可在 CodePen 上查看真实效果编辑代码 说明你现在可以使用任何类型html 标签创建有序列表。 counter-reset 初始化计数器,该值是计数器名称。默认情况下,计数器从0开始。...此函数可以接收两个参数,第一个作为计数器名称,第二个参数表示占位内容,例如 3.1小数点。 CSS计数器对于制作轮廓列表特别有用,因为计数器新实例是在元素中自动创建。...可在 CodePen 上查看真实效果编辑代码 说明 伪类::focus-within 将对应样式应用于元素(任何元素被聚焦)。例如,表单元素内输入元素。

    5.4K10

    1.5 万字 CSS 基础拾遗(核心知识、常见需求)

    @规则 CSS 规则是样式主体,通常样式表会包括大量规则列表。但有时候也需要在样式表中包括其他一些信息,比如字符集,导入其它外部样式表,字体等,这些需要专门语句表示。...针对不同样式,将按照如下顺序进行层叠,越往下优先越高: 用户代理样式表中声明(例如,浏览器默认样式,在没有设置其他样式使用)。 用户样式表中常规声明(由用户设置自定义样式。...important 又可以把优先提至最高,就是因为它优先最高,所以需要谨慎使用它,以下有些使用注意事项: 一定要优先考虑使用样式规则优先来解决问题而不是 !...以下这个列表越往下层叠优先越高,视觉上效果就是越容易被用户看到(不会被其他元素覆盖): 层叠上下文 border background z-index < 0 节点 标准流内块非定位节点...参考:CSS浮动清除浮动,梳理一下[16] 消除浏览器默认样式 针对同一个类型 HTML 标签,不同浏览器往往有不同表现,所以在网站制作时候,开发者通常都是需要将这些浏览器默认样式清除,

    1.4K20

    148道 CSS 与 JavaScript 基础面试题

    CSS面试题 1. 介绍一下标准 CSS 盒子模型?低版本 IE 盒子模型有什么不同?...CSS 优先算法如何计算? 相关知识点: CSS优先是根据样式声明特殊性值来判断。...相同特殊性值声明,根据样式引入顺序,后声明规则优先高(距离元素出现最近) 部分浏览器由于字节溢出问题出现进位表现不做考虑 7. 关于伪类 LVHA 解释?...elem:last-of-type 选中元素下最后一个elem类型元素。 elem:only-of-type 如果元素下元素只有一个elem类型元素,则选中该元素。...list-item 像块类型元素一样显示,并添加样式列表标记。 table 此元素会作为块表格来显示。 inherit 规定应该从父元素继承display属性值。

    1.1K20

    1.5 万字 CSS 基础拾遗(核心知识、常见需求)

    @规则 CSS 规则是样式主体,通常样式表会包括大量规则列表。但有时候也需要在样式表中包括其他一些信息,比如字符集,导入其它外部样式表,字体等,这些需要专门语句表示。...针对不同样式,将按照如下顺序进行层叠,越往下优先越高: 用户代理样式表中声明(例如,浏览器默认样式,在没有设置其他样式使用)。 用户样式表中常规声明(由用户设置自定义样式。...important 又可以把优先提至最高,就是因为它优先最高,所以需要谨慎使用它,以下有些使用注意事项: 一定要优先考虑使用样式规则优先来解决问题而不是 !...以下这个列表越往下层叠优先越高,视觉上效果就是越容易被用户看到(不会被其他元素覆盖): 层叠上下文 border background z-index < 0 节点 标准流内块非定位节点...参考:CSS浮动清除浮动,梳理一下[16] 消除浏览器默认样式 针对同一个类型 HTML 标签,不同浏览器往往有不同表现,所以在网站制作时候,开发者通常都是需要将这些浏览器默认样式清除,

    1.1K30

    如何使用CSS伪类选择器

    MDN解释::is()CSS伪类函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择元素。这对于以更紧凑形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同样式。...这往往会导致相同样式。比如: :where(article, section, aside) p { color: #444; } 不同点在于优先[9]。...然而,:where()零优先CSS重置来说是很实用,它在没有特定样式情况下应用标准样式基线。通常情况下,重置会应用一个默认字体、颜色、内边距外边距。...简而言之: 浏览器在页面上绘制元素时将CSS样式应用于该元素。因此,在进一步添加元素时,整个元素必须重新绘制。...你对嵌套CSS预处理器需求会减少。 :has()更具革命性令人激动。选择将迅速流行起来,我们将忘记黑暗时代。

    2.2K40

    CSS3入门

    ,但是会影响页面响应速度,不建议使用 样式两个特性 层叠性:多个选择器设置样式可以叠加在同一标签上 当样式出现冲突时,优先考虑权重;权重相同情况下,采用就近原则 继承性:标签继承标签某些样式...伪类样式 选择器权重 块元素行内元素 HTML标签主要分为块标签行内标签两种类型,也称为块元素行内元素 块元素 快元素会独占一行,例如:、、 等。...元素浮动后,会被转换为类似行内块元素 浮动元素互相贴靠一起,但是如果宽度装不下这些浮动盒子,多出盒子会另起一行对齐 float:inherit;该属性为继承元素浮动属性 列表浮动...清除浮动 额外标签法 添加一个新标签,设置该标签清除浮动 clear : left | right | both 添加overflow法 产生问题标签添加 overflow 属性 overflow...如果都没有则会以浏览器为准定位 { position:absolute; } 相 ==相(口诀)∶元素使用绝对定位,元素使用相对定位== 元素使用相对定位不脱标,更加方便页面布局

    1.6K10

    后盾人教程_最专业后盾

    标签 id属性不仅给css用,也给js用 标签元素使用多类样式声明:属性中各个选择器用空格分开 四 结构选择器: h1 p:指定标签位置范围,h1标签里后代p标签,空格代表每一层所有后代(...,所有元素里第一个/最后一个,是每一层;:first-of-type,:last-of-type,某类型元素第一个/最后一个 唯一元素伪类::only-child,only-of-type...3权重,写CSS样式更流畅 层叠样式,是不同选择器效果附加到元素上。...important 四 元素继承权重 元素继承元素样式规则 继承没有权重,是NULL 不是所有规则都可以继承,比如边框 五 通配符与继承博弈 通配符权重是0 0 > NULL 六...操作数据内容样式CSS没那么简单哟 数据使用表格或者列表展现 section,ul,li可以用display指定为table-header-group,table-row-group,table-row

    1K20
    领券