时间戳

首页 > 解决方案 > 如何使 CSS 适用于特定的特定元素？

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

问题描述

我正在尝试创建一个时间线，就像这里显示的那样。在示例中作者使用<p>CSS 中的标签来显示时间线效果。当我在我的代码中使用此代码时。我使用<p>标签的每个部分都会获得我不想要的 CSS 效果。

所以为了避免这种情况，我尝试使用一个 ID，我给了所有<p>我希望效果显示的标签，并在 CSS 文件中用 ID 声明了 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 没有执行。之后我尝试了这个堆栈溢出问题中的建议。但这也没有用。

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

谢谢

标签： htmlcss

解决方案

您的代码不起作用，因为在 ID 之后，有一个空格，它将尝试选择#tematch的后代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>

推荐阅读