如何根据 DOM 中的位置设置具有相同类名的元素的样式？

使用类名定位特定元素：CSS nth-Child 方法

挑战： 根据类名有选择地设置具有相同类名的元素的样式的位置，无论它们在

解决方案： 根据元素在父元素中的顺序位置，利用 nth-child() 或 nth-of-type() 伪选择器来定位元素。

nth-child() 伪选择器

nth-child(n) 伪选择器允许您设置其父元素的第 n 个子元素的样式。例如，要定位类为“myclass”的第一个元素：

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

要定位第二个和第三个元素，请使用以下选择器：

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () 伪选择器

nth-of-type(n) 伪选择器功能与 nth-child() 类似，但它根据其父级中的类型选择元素。当父级中有多个相同类型的元素时，这非常有用：

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

示例 HTML：

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

以上是如何根据 DOM 中的位置设置具有相同类名的元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！