时间戳

首页 > 解决方案 > 对元素进行更改

html - 对元素进行更改

问题描述

我有两个<i>元素，我只想对第一个元素进行更改。我怎么能不使用类来做到这一点？

<div class="align">
   <h2 class="text-uppercase">Contact Us</h2>
   <p><i class="fas fa-envelope"></i>example@gmail.com</p>
   <p><i class="fas fa-phone-alt"></i>000000000</p>
</div>

标签： htmlcss

解决方案

有许多 CSS 伪选择器可以解决这个问题。这里有两个简单的：

// select a 2nd child element of .align with an <i> inside
.align :nth-child(2) i {
  // rules for the <i> element styling
}
// select the first <p> inside align with an <i> inside
.align p:first-of-type i {
  // rules for the <i> element styling
}

您只需要确保用于选择的模式是唯一的，这样其他相似的元素就不会被拾取。

推荐阅读