相关疑难解决方法(0)

如何读取应用的CSS计数器值?

假设您有一个CSS 2.1计数器

ol {
  counter-reset: section;
  list-style-type: none;
}
li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}


<ol>
  <li>itemA</li>          <!-- 1     -->
  <li>itemB               <!-- 2     -->
    <ol>
      <li>itemC</li>      <!-- 2.1   -->
      <li id="foo">itemD</li>      <!-- 2.2   -->
Run Code Online (Sandbox Code Playgroud)

(参见https://developer.mozilla.org/en/CSS_Counters "嵌套计数器")

有没有办法在JavaScript中读取/获取:before.content(在这种情况下为"2.2")<li id="foo">

编辑:在我的情况下,只有Mozilla的解决方案就足够了.但似乎没有办法访问这些信息.至少我没有在https://developer.mozilla.org/en/CSS_Counters ff 找到任何内容.

javascript css

10
推荐指数
1
解决办法
3668
查看次数

使用CSS"内容"来设置分层嵌套列表的样式

我在使用css"content"属性创建一个有序列表时遇到了一些问题,该列表已被设置为使用小数显示更深层嵌套的项目.我正在尝试做的似乎是一项显而易见的任务,但我还没有成功,而且我遇到了一些跨浏览器的问题,但我似乎无法在互联网上找到太多的东西......我是什么在我在这个问题的底部附上的图像中,我试图做的很清楚.

我的CSS:

ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;}

ol li:before {
        content: counter(num) ". ";
        counter-increment: num;
        counter-reset: sub_num;
}

ol ol li:before {
        content: counter(num) "." counter(sub_num)  " ";
        counter-increment: sub_num; 
        counter-reset: sub_sub_num;
}
ol ol ol li:before {
        content: counter(num) "." counter(sub_num)  "." counter(sub_sub_num) " ";
        counter-increment: sub_sub_num; 
        counter-reset:none;
}
Run Code Online (Sandbox Code Playgroud)

我的HTML:

<ol>
    <li>Level 1 - should be '1.'</li>
    <li>Level 1 - should be '2.'
      <ol>
        <li>Level 2 - Should be '2.1'</li>
        <li>Level 2 - Should …
Run Code Online (Sandbox Code Playgroud)

html css pseudo-element

6
推荐指数
1
解决办法
5201
查看次数

标签 统计

css ×2

html ×1

javascript ×1

pseudo-element ×1