时间戳

首页 > 解决方案 > 如何使用 nth-child 使图标变为红色

html - 如何使用 nth-child 使图标变为红色

问题描述

.videoicons i:nth-child(1) { color:red; }
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<ul class="videoicons">
    <li><i class="fas fa-thumbs-up"></i><span>1K</span></li>
    <li><i class="fas fa-thumbs-down"></i> <span>0</span></li>
</ul>

使用我拥有的编码，我希望我只能将第一个图标设为红色。但是，结果显示第一个和第二个图标变为红色。

我试过了.videoicons li:nth-child(1){color:red;}。它使1k第一个图标变为红色。

我试图通过使用仅使第一个图标变为红色nth-child。

有没有办法做到这一点？

标签： htmlcsscss-selectors

解决方案

改变：

.videoicons i:nth-child(1) { color:red; }

至：

.videoicons li:nth-child(1) i { color:red; }

这样，您就可以专门选择第一个列表项，并且只为那里的图标着色。更新示例：

.videoicons li:nth-child(1) i { color:red; }
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<ul class="videoicons">
    <li><i class="fas fa-thumbs-up"></i><span>1K</span></li>
    <li><i class="fas fa-thumbs-down"></i> <span>0</span></li>
</ul>

推荐阅读