标签: css-counter

我尝试在每行前面设置一个带有行号的代码预先设置框.我更喜欢用CSS做.这就是我所做的

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}

<pre>
  <span>lorem ipsum</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

但是,所有行都具有数字1.增量不起作用.这是一个 …

可以说我有一个简单的列表如下:

<ol>
    <li class="count">one</li>
    <li class="count">two</li>
    <li class="count">three</li>
    <li class="count">four</li>
    <li>blabla</li>
    <li class="count">five</li>
    <li class="count">six</li>
    <li>blabla</li>
    <li class="count">seven</li>
</ol>

现在我只想用类'count'对列表项进行编号

所以如果我添加CSS:

li {
    list-style-type: decimal;
}

然后删除没有类的列表项的list-style-type:

li:not(.count) {
    list-style-type: none;
}

我明白了:

小提琴

li {
  list-style-type: decimal;
}
li:not(.count) {
  list-style-type: none;
}

<ol>
  <li class="count">one</li>
  <li class="count">two</li>
  <li class="count">three</li>
  <li class="count">four</li>
  <li>blabla</li>
  <li class="count">five</li>
  <li class="count">six</li>
  <li>blabla</li>
  <li class="count">seven</li>
</ol>

这里显而易见的问题是没有类的列表项也在这里"计算",只是没有显示.

因此,在上面的示例中,列表应编号为7 - 编号跳过没有类的列表项.这可以用CSS完成吗？

我正在使用一个自编的编号列表.如何读取start属性并使用CSS将其添加到计数器？

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

小提琴

在下面的代码中,我需要使用divHTML顶部的标记进行样式设置.如果没有div标签,hx标签的轮廓编号正确,但是div一切都完全错误.我需要这个来工作,像这样,但随着div在地点标签还在,我需要它为不同ID的div的工作.有任何想法吗？

body {counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}

h1:before {counter-increment: h1; content: counter(h1) ". "}
h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". "}

<div class="varies">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
<p>Morbi efficitur nibh metus, a vehicula mauris tristique ac. Duis ornare metus eget iaculis hendrerit.</p>
  <h2>Morbi nisi lacus, …

我的目标是逐行打印文本文件并在开头添加行号.像这样:

<div id="wrapper">
  <div class="line">1: asdf</div>
  <div class="line">2: asdfasdf</div>
  <div class="line">3: asdfasdfasdfasdf</div>
  <div class="line">4: asdf</div>
</div>

n是CSS中的变量,负责其父级内的元素索引,并且在子选择器中可以对其执行操作,例如.nth-child(2n + 3)

有没有办法获取此变量并将其作为纯文本插入？基本上是这样的:

.line:before {
  content: n;
}

我知道我可以用SASS完成这个,这就是我正在使用的,我只是想知道是否有某种方法可以用vanilla CSS来实现它.

我有一个列表ul> li*5(并不总是相同的数量).我设置了一个计数器,我得到了:

1 2 3 4 5

li:nth-child(n):before {
  counter-increment: skill;
  content: counter(skill);
  color: white;
}

这个问题我可以使用计数器(技能)一内部计算()或者,我可以添加单位是像素EM REM%斯小姐

我试过了:

transition: all 250ms linear #{counter(skill)} * 1s;
transition: all 250ms linear counter(skill) * 1s;

我希望延迟增加,例如:

li 1s delay
li 2s delay
li 3s delay
li 4s delay
li Xs delay

以下CSS计数器示例无法按预期工作.子标题的计数器应在每个主标题后重置:

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  counter-reset: h2;
  content: counter(h1) ". ";
  counter-increment: h1;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

但是,以下工作符合预期:

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  content: counter(h1) ". ";
  counter-increment: h1;
}
h1 {
  counter-reset: h2;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

我的问题是,为什么 …

counter-reset当ol在div中时,我正在努力奋斗.代码段编号中的红色列表应为:

1,2,3

不:

3.1,3.2,3.3,

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

<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

http://jsfiddle.net/1dab8xs7/1/

HTML

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

SCSS

ol {
  counter-reset: item;
  li {
    display: block
  }
  li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
  }
}

现在列表的排序如下:

1. ITEM1

1.1.ITEM2

2. ITEM1

2.1.ITEM2

2.2.项目3

有没有什么方法可以在列表的开头增加一个级别的排序？第二个<ol>开始于2:2.1.ITEM1

1.1.ITEM1

1.1.1.ITEM2

1.2.ITEM1

1.2.1.ITEM2

1.2.2.项目3

-------同一父母的第二名---------

2.1.ITEM1

2.1.1.ITEM2

2.2.ITEM1

2.2.1.ITEM2

2.2.2.项目3

笔在这里:http://codepen.io/simPod/pen/wawOLd

假设我有这样的HTML或XML文档:

<body>
   <section>
      <h1>This should be numbered 1</h1>
      <section>
        <h1>This should be numbered 1.1</h1>
        <p>blah</p>
      </section>
      <section>
        <h1>This should be numbered 1.2</h1>
        <p>blah</p>
      </section>
   </section>
   <section>
      <h1>This should be numbered 2</h1>
      <section>
        <h1>This should be numbered 2.1</h1>
        <p>blah</p>
      </section>
   </section>
</body>

这只是一个说明性的例子; 通常,节中可以有任意数量的子节,并且节可以嵌套到任何深度.

是否可以使用CSS(计数器和生成的内容)在每个节标题的开头生成所需的节号？

我见过这种事情的唯一例子是嵌套列表,但是你可以将'counter-reset'附加到OL并且'counter-increment'附加到LI.在这里,似乎你需要'section'来重置它的子节,并且增加它的父节,并且将它们都附加到一个元素名称不起作用.