选择特定元素

Question

伙计们，如果我有很多段落，我不知道如何选择一个特定的class / id选择器，而我只想选择一个特定的选择器。例如，如果我想选择第二段，该怎么办？ <p>World</p>我能以某种方式选择它还是我需要添加另一个类。

示例：

HTML：

<div class="class">
   <p>Hello</p>
   <p>World</p>
</div>

如何选择第二段<p>World</p>

Answer 1

看看伪类选择器:nth-of-type()

在这种情况下，您只需要执行.class > div:nth-of-type(2)

.class > p:nth-of-type(2) {
  background-color: red
}

<div class="class">
   <p>Hello</p>
   <p>World</p>
</div>

Answer 2

Id是元素的唯一性。如果您定义ID，则可以使用该ID。 HTML

<div class="class">
   <p id="hello">Hello</p>
   <p id="world">World</p>
</div>

CSS

#hello {
 css attributes..
}
#world {
 css attributes..
}

Answer 3

您可以使用:nth-child()选择器选择第n个元素

这将选择第二段

.class p:nth-child(2){
  /* properties */
}

Answer 4

您可以使用nth-child()或last-child()选择<p>World</p>元素。

.class p:nth-child(2) {
  color: red;
}

.class1 p:last-child {
  color: green;
}

<div class="class">
  <p>Hello</p>
  <p>World</p>
</div>

<div class="class1">
  <p>Hello</p>
  <p>World</p>
</div>