在列表外重置默认CSS列表计数器

在列表外重置默认CSS列表计数器,css,Css,假设我有以下段落序列: <p id="par-1">Lorem ipsum dolor sit amet,</p> <p id="par-2">consectetur adipiscing elit.</p> <p id="par-3">Cras est augue,</p> <p id="par-4">luctus vitae pretium ut,</p> <p id="par-5">

假设我有以下段落序列:

<p id="par-1">Lorem ipsum dolor sit amet,</p>
<p id="par-2">consectetur adipiscing elit.</p>
<p id="par-3">Cras est augue,</p>
<p id="par-4">luctus vitae pretium ut,</p>
<p id="par-5">scelerisque nec libero.</p>
<p id="par-6">Phasellus condimentum sollicitudin mi,</p>
<p id="par-7">vitae molestie tellus cursus vitae.</p>
呈现为

Lorem ipsum dolor sit amet,
1. consectetur adipiscing elit.
Cras est augue,
2. luctus vitae pretium ut,
scelerisque nec libero.
3. Phasellus condimentum sollicitudin mi,
vitae molestie tellus cursus vitae.
问题

这里隐式使用的列表计数器是否可供CSS访问?我可以吗?我在哪里可以找到更多关于这方面的信息?(位于
w3.org
的部分没有分享太多细节。)


PS:我不是在寻找模仿所描述行为的替代实现,我是在寻找细节来理解和操作现有的实现。

在div上,您将使用任何类名,而不是class=“container”。我检查过了,它正在工作

.container p:before{
计数器增量:mycounter;
内容:计数器(mycounter)”;
}
.容器:第一种类型{
计数器复位:mycounter;
}
.p容器:第n个子(2n+1):之前{
显示:无;
}

Lorem ipsum dolor sit amet

献祭精英

克拉斯·伊斯特·奥古斯

生命之路

自由女神权杖

Phasellus调味品sollicitudin mi

胎动,胎动,胎动,胎动

最佳实践

ol li{列表样式位置:内部;}

Lorem ipsum dolor sit amet,

  • 献祭精英。
  • 这是8月初,

  • luctus vitae pretium ut,
  • 自由女神权杖。

  • Phasellus调味品sollicitudin mi,
  • 维塔·莫莱斯蒂·泰勒斯·克鲁斯·维塔。


    有两种方法可以做到这一点(如果我知道你的意图):

    • 显示一个与您类似的常规列表,但在一些列表类型为“无”的列表上隐藏计数器
    • 或者创建一个自定义CSS计数器并有选择地增加它
    正文{
    /*在任何父级上初始化计数器*/
    计数器复位:部分;
    }
    p[id^='par-']{
    /*每次遇到id以“par-”开头的p时,递增计数器*/
    反增量:节;
    }
    #par-2::之前,
    #par-4::之前,
    #par-6::之前{
    /*在内容之前插入计数器值*/
    内容:柜台(部分)”;
    }

    洛雷姆·伊普苏姆·多洛尔·希特·阿梅特

    奉献精英

    八月初

    luctus vitae pretium ut,

    权杖nec libero

    Phasellus调味品sollicitudin mi


    vitae molestie tellus cursus vitae.

    感谢您在代码片段中编辑代码。我希望您已经在我的代码中找到了解决方案。请发送您的反馈,以便其他人知道如果有人面临相同的问题,您的问题会得到解决。我不是在寻找模仿所述行为的实现,我是在寻找操纵现有行为的实现。我不是在寻找模仿所述行为的实现,我希望操纵现有的一个。将
    嵌套到一个列表中在语义上没有多大意义,并且会弄乱结构,不是吗?因此无法访问
    元素使用的任何内部计数器?
    Lorem ipsum dolor sit amet,
    1. consectetur adipiscing elit.
    Cras est augue,
    2. luctus vitae pretium ut,
    scelerisque nec libero.
    3. Phasellus condimentum sollicitudin mi,
    vitae molestie tellus cursus vitae.