如何解决在CSS中选择同一类的特定元素
我有一段这样的段落(在h3标签中)
<h3 id="para1" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 id="para2" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 id="para3" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
它们都具有相同的类para我想选择一个特定的para像para2而不使用其id而是class 我该怎么办?
如果我没有正确解释它,我只是想知道如何选择同一类的特定元素。我应该使用哪种类型的选择器,因为很难使用id。
解决方法
我强烈建议您使用id
选择器来选择您的元素,因为那是该元素的唯一标识符。但是,如果您知道类中有多少元素以及要选择哪个孩子,则可以使用:nth-child()
选择器。例如下面的示例选择第二个孩子:
h3.para:nth-child(2) {
color: red;
}
<h3 id="para1" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 id="para2" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 id="para3" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
,
您可以同时使用元素的类和ID来引用该元素:
.para#para2 {
...
}
如果您只喜欢处理类,则可以这样做:
<h3 class="para para1">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 class="para para2">
Lorem ipsum dolor sit amet consectetur,</h3>
<h3 class="para para3">
Lorem ipsum dolor sit amet consectetur,</h3>
然后使用两个类都引用该元素:
.para.para2 {
...
}
,
在这里,只需使用:not() with nth-child()
。
h3.para:not(:nth-child(2)) {
color: blue;
}
<h3 id="para1" class="para">
Lorem ipsum dolor sit amet consectetur,</h3>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。