Question

我试图做这样的事情：

<h2>1.1 Bananas</h2>
<h3>1.1.1 </h3>
<h3>1.1.2 </h3>
<h3>1.1.3 </h3>

<h2>1.1 Apples</h2>
<h3>1.1.1 </h3>
<h3>1.1.2 </h3>
<h3>1.1.3 </h3>

<h2>1.1 Oranges</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>

注意数字序列如何重复。

我可以通过CSS进行自动编辑 - 但是我无法弄清楚是否有重复编号系列的方法。

Answer 1

一种方法是使用CSS counters并在每次遇到counter-reset时重置它们，如下面的代码段所示。

h2选择器中的h2属性将h3计数器的值设置为1，将h2计数器的值设置为0（默认值）每次counter-increment遇到1}}元素。

h3选择器中的h3属性会在每次遇到h3元素时递增h2 { counter-reset: h2 1 h3 0; } h2:before { content: "1." counter(h2); } h3 { counter-increment: h3; } h3:before { content: "1." counter(h2)"." counter(h3); }计数器的值。

<h2>Bananas</h2> <!-- h2 counter = 1, h3 counter = 0 -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->
<h2>Apples</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->
<h2>Oranges</h2> <!-- h2 counter = 1 (reset), h3 counter = 0 (reset) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 1 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 2 (increment) -->
<h3></h3> <!-- h2 counter = 1, h3 counter = 3 (increment) -->

h2

实际上，您甚至不需要h2 { counter-reset: h3 0; } h2:before { content: "1.1"; } h3 { counter-increment: h3; } h3:before { content: "1.1." counter(h3); }计数器用于您的情况，因为值始终为1.所以即使CSS中的下面就足够了：

$Array1 = array("myfirst_value", "mysecond_value", "mythird_value");

$Array2 = array
(
    4 => myfirst_value,
    8 => myforth_value,
    21 => mysecond_value,
    7 => myfifth_value,
    17 => mysixth_value,
    20 => mythird_value,
    16 => myseventh_value
);

// Remove elements of the 1st array from the 2nd
function f ($v) { global $Array1;  return in_array($v, $Array1);}
$a1 = array_filter($Array2, 'f');    
// Take the rest elements
$a2 = array_diff_key($Array2, $a1);
// Combine back 
print_r($a1+$a2);

通过CSS重复一系列数字

1 个答案: