Question

我有一个看起来像这样的标记，所有项目都根据它们的位置编号。你能根据物品的数量自动创建这样的东西吗？无论是使用CSS还是HTML，我都知道可以使用javascript。理想情况下，我希望写出01.01,01.02等，但如果它只能用一层，那也可以。

   <section class="profile__section">
    <h1 class="profile__section__header">01. Colors</h1>
    <div class="container__profile__subsection">
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.01 Blue</h2>
            <p class="profile__subsection__color" style="background: #36314C;">Hex: 36314C</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.07 Topics Blue</h2>
            <p class="profile__subsection__color" style="background: #4A455D;">Hex: 4A455D</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.02 White</h2>
            <p class="profile__subsection__color" style="background: #fff; color: black;">Hex: FFFFFF</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.03 Places Yellow</h2>
            <p class="profile__subsection__color" style="background: #F4BA38;">Hex: F4BA38</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.04 Tag Blue</h2>
            <p class="profile__subsection__color" style="background: #347591;">Hex: 347591</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.05 Tag Blue Light</h2>
            <p class="profile__subsection__color" style="background: #d7e2e2;">Hex: d7e2e2</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.06 Time Blue</h2>
            <p class="profile__subsection__color" style="background: #147562;">Hex: 147562</p>
        </div>
    </div>
</section>
<section class="profile__section">
    <h1 class="profile__section__header">02. Cartegory Colors</h1>
    <div class="container__profile__subsection">
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.01 People Green</h2>
            <p class="profile__subsection__color" style="background: #7CB93C;">Hex: 7CB93C</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.02 Comms Pink</h2>
            <p class="profile__subsection__color" style="background: #D53668;">Hex: D53668</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.03 Photos Purple</h2>
            <p class="profile__subsection__color" style="background: #993B9B;">Hex: 993B9B</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.04 Event orange</h2>
            <p class="profile__subsection__color" style="background: #EA5B1D;">Hex: EA5B1D</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.05 Docs blue</h2>
            <p class="profile__subsection__color" style="background: #54BBB6;">Hex: 54BBB6</p>
        </div>
    </div>
</section>

Answer 1

使用CSS，您实际上可以订购HTML元素。不是元素价值思想。请参阅W3Schools - CSS order

上的CSS订单属性

在W3Schools提取的剪辑下面

＆＃13;

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}

＆＃13;

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the order property.</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-order property.</p>

＆＃13;

Answer 2

Similair到有序列表，我想要添加的数字不是内容的一部分，我需要移动内容并希望内容跟随。这是我的解决方案：

body {
    counter-reset: section;
}

.profile__section__header::before{
    counter-increment: section;
    content: counter(section, decimal-leading-zero) ". ";
}

.profile__subsection__header::before{
    counter-increment: subsection;
    content: counter(section, decimal-leading-zero) "." counter(subsection, decimal-leading-zero) " ";
}

你能创建一个列出项目的有序列表吗？

2 个答案: