每个＆＃34; ::之前＆＃34;的内容不同伪元素

时间：2018-03-24 11:58:27

标签： html css css-selectors pseudo-element css-content

我们如何为每个::before伪元素提供不同的内容？我的代码如下所示：

＆＃13;
＆＃13; 
.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
}

.timeline h1:first-of-type:before {
  content: '01';
  color: #E82F3A;
}

.timeline h1:nth-of-type(2):before {
  content: '02';
  color: #E82F3A;
}

.timeline h1:last-of-type:before {
  content: '03';
  color: #E82F3A;
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}
＆＃13; 
<div class="timeline">
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我希望第一个<h1>＆＃39; ::before伪元素包含内容＆＃39; 01＆＃39;第二个包含内容＆＃39; 02＆＃39;，以及最后有内容＆＃39; 03＆＃39;。但是，当我尝试使用该代码时，所有<h1>的{​​{1}}内容都是＆＃39; 03＆＃39;怎么了？

3 个答案:

答案 0 :(得分：1)

您需要nth-child选择器。由于您的, vs是兄弟姐妹，因此您可以创建一个包含该规则及其子项的CSS规则。假设di的父级有div id，示例可能是这样的：

foobar

答案 1 :(得分：1)

示例中的每个h1都是first-of-type，因为计数会重置每个新的父div，因此您需要使用div:nth-of-type h1::before。

div h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
}

div:nth-of-type(1) h1::before {
  content: '01';
  color: #E82F3A;
}

div:nth-of-type(2) h1::before {
  content: '02';
  color: #E82F3A;
}

div:nth-of-type(3) h1::before {
  content: '03';
  color: #E82F3A;
}

div h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

如果您真的想要数字，可以使用CSS计数器：

body {
  counter-reset: section;
}

div h1::before {
  counter-increment: section;
  position: absolute;
  font-size: inherit;
  left: 0;
  content: "0"counter(section);
  color: #E82F3A;
}

div:nth-of-type(10) h1::before,
div:nth-of-type(10) ~ div h1::before {
  content: counter(section);
}

div h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

答案 2 :(得分：1)

:first-of-type，:nth-of-type和:last-of-type伪类引用兄弟姐妹中的第一个/第n个/最后一个元素 。由于您的<h1>每个都包含在他们自己的<div>中，因此它们与:first-of-type和:last-of-type都匹配，后来定义的规则获胜。

您可以使用CSS counters。

，而不是处理所有这些问题 

.timeline {
  counter-reset: my-counter;
}

.timeline h1::before {
  content: counter(my-counter, decimal-leading-zero);
  counter-increment: my-counter;
}

/* the rest is your original code */
.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
  color: #E82F3A;
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}
<div class="timeline">
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div>
    <h1>Heading</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

打破它：

.timeline {
  counter-reset: my-counter;
}

我们正在创建一个名为my-counter的新计数器。它需要在我们使用它之前进行初始化。 counter-reset处理这个问题。每个.timeline都有一个my-counter计数器，从0开始。我们将在h1::before伪元素中递增它，因此实际显示的数字从1开始。

.timeline h1::before {
  content: counter(my-counter, decimal-leading-zero);
  counter-increment: my-counter;
}

在此，我们将h1::before伪元素的内容设置为my-counter计数器的值，并将decmial-leading-zero list style应用于counter。 counter-increment在显示之前将my-counter的值增加1。

相关问题
最新问题