html - 如何使 CSS 应用于特定的特定元素？

Question

我正在尝试创建一个时间线，如图所示 here . 在示例中，作者使用了 <p> CSS中的标签显示时间轴效果。当我在我的代码中使用此代码时。我用过 <p> 的每个部分标记获得我不想要的 CSS 效果。

因此，为了避免这种情况，我尝试使用我给所有 <p> 的 ID我希望效果在其中显示 ID 的标记，并使用该 ID 在 CSS 文件中声明了 CSS。

这是我尝试过的:

#te p {
  border-top: 2px dashed;
  border-color: blue !important;
  margin: 0;
  padding: 30px;
}

#te p:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px;
  padding-right: 0;
}

#te p:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px;
  padding-left: 0;
}

#te p:first-child {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

#te p:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

<div>
  <p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p id="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>

但是没有用。 CSS 没有执行。之后我尝试了 this 中的建议堆栈溢出问题。但这也没有用。

那么我如何将此 CSS 仅应用于少数 <p>这里提到的标签而不是任何其他 <p>代码中其他地方存在的标签？

谢谢

Answer 1

您的代码不起作用，因为在 ID 之后有一个空格，它将尝试选择 #te 的后代，匹配 p。

所以你必须颠倒这些选择器的顺序，并删除空格，比如:

p#te

而且，ID 意味着是唯一的，因此您应该改用类(您可以通过 . 而不是 # 选择它)。

因此，您的代码应如下所示:

p.te{
  border-top: 2px dashed;
  border-color: blue !important;
  margin: 0;
  padding: 30px;
}

p.te:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px;
  padding-right: 0;
}

p.te:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px;
  padding-left: 0;
}

p.te:first-child {
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

p.te:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

<div>
  <p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
  <p class="te">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>