Question

我有一个网页，上面会出现编号问题和字母子问题。但格式并不是非常严格。有时，子问题将与主要问题在同一段中，有时它们将在以下段落中。（或者他们可能会出现在列表中或每个列表中。）

所以我有span.problem和span.subproblem。我设置了一个名为＆＃34; problem＆＃34;的计数器，它在body元素中重置，并在每次出现span.problem时递增（技术上＆＃34;在＆＃34; span.problem之前）。我还设置了一个＆＃34;子问题＆＃34;计数器最初在body元素中重置，但也在每个span.problem元素中重置。它在每个span.subproblem元素之前递增。

问题似乎是，当span.problem元素与span.subproblem元素位于同一段落内时，子问题计数器上的反复位似乎只能按我预期的方式工作。

这是一个极简的例子：

CSS

body {
 counter-reset: problem, subproblem;
}

span.problem:before {
 counter-increment: problem;
 content: "Problem " counter(problem) ": ";
}

span.problem {
 counter-reset: subproblem;
}

span.subproblem:before {
 counter-increment: subproblem;
 content: "(" counter(subproblem, lower-alpha) ") ";
}

HTML

<html>
<head>
 <link rel=stylesheet href="style.css" type="text/css">
</head>
<body>

<p>Some text leading up to: <span class=problem>do the first problem.</span> Now this is in the same paragraph as <span class=subproblem> the first subproblem</span>and <span class=subproblem>the second subproblem.</span></p>

<p>The <span class=subproblem>third subproblem</span> is in its own paragraph.</p>

<p>Later on, you'll want to <span class=problem> do the second main problem</span>, but all the subproblems will be in another paragraph.</p>

<p>The second paragraph has <span class=subproblem>a subproblem here</span> and <span class=subproblem>here</span>.</p>

</body> 
</html>

关于如何实现我的目标的任何想法？

Answer 1

这个FIDDLE会给你一个开始。

关于计数器的一般想法是将重置＆＃39;在您希望每个计数器重新开始的那个元素中的行。

因此，在这种特殊情况下，主问题计数器只应在页面顶部重置，并在每个mainproblem类中递增。

子问题应该在页面顶部重置，但随后在每个mainproblem类的开头重置，并为每个子问题类增加。

我添加了一些无聊的样式，只是为了让一些文字更容易看到。

CSS

body {
    counter-reset: problem, subproblem;
}
.mainproblem {
    width: 400px;
    background-color: lightblue;
    color: black;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    counter-reset: subproblem 0;
    counter-increment: problem;
}
.problem:before {
    content: "Problem " counter(problem) ": ";
    color: red;
}
.subproblem:before {
    counter-increment: subproblem;
    content: "(" counter(subproblem, lower-alpha) ") ";
    color: blue;
}

编辑：尝试更明确的陈述 - 假设我们根据＆＃34; class＆＃34;中的差异来计算。

所有计数器都有名称，应重置在CSS的顶部。
假设您有一系列名为＆＃34; problem＆＃34;并且您希望在每次看到＆＃34;问题＆＃34;时增加问题编号。重置主体下页面顶部的问题计数器，然后在.problem css中添加＆＃34;反增量：问题＆＃34;。
假设您有一系列名为＆＃34; subproblem＆＃34;总是在＆＃34;问题＆＃34;类。每当你遇到一个新的问题＆＃34;上课时，你需要重置柜台 - 所以在＆＃34; .problem＆＃34;你添加＆＃34; counter-reset：subproblem＆＃34;。在＆＃34; .subproblem＆＃34;你添加＆＃34;反增量：子问题＆＃34;。

CSS counter-reset只能在同一个盒子里面工作？

1 个答案: