选择元素最后的CSS

Question

我正在用语义ui react构建我的东西，我认为它比我的其他CSS优先。在<Menu ....... inverted>将文本设置为白色之后，我尝试将文本设置为黑色。

这是我的代码Menu.Item位于一个名为“ inverted”的菜单中，它将使组件内的所有内容变为相反的颜色。因此，我认为我正在尝试的许多事情都没有效果。

<Menu.Item>
      <Dropdown item text=<i class="user outline icon" /> direction="left">
        <Dropdown.Menu>
          {isAuthenticated ? (
            <div class="hiiii">
              <Dropdown.Item>
                <a id="hii" color="white">
                  Let's welcome {username}!
                </a>
              </Dropdown.Item>
              <a id="hii" color="white" onClick={this.travelToProfile}>
                <Dropdown.Item>Profile! (in development)</Dropdown.Item>
              </a>
              <a
                id="hii"
                color="black"
                onClick={this.travelToSavedRoadmaps}
              >
                <Dropdown.Item>
                  View saved roadmaps (in development)
                </Dropdown.Item>
              </a>

              <a id="hii" onClick={this.logOutClick}>
                <Dropdown.Item>Logout!</Dropdown.Item>
              </a>
            </div>
          ) : (
            <Dropdown.Item href="/login">
              <a id="hii">Please Log In</a>
            </Dropdown.Item>
          )}
        </Dropdown.Menu>
      </Dropdown>
    </Menu.Item>

我在一些<a/>之后放了一个颜色attr，目的只是为了测试一下。经过多次测试，我发现一些有趣的事情：如果我这样做

#hii {
  color: black;
}

第一个ID为hii的a会变成黑色，其余的则不会。起作用的东西是div {color: black !important}，但这也会使<i class="user outline icon"/>变黑。因此，我试图仅选择那些标签并使它们变黑。我没有a {color: black!important}的运气。谢谢，抱歉，如果我没有道理，该死的是凌晨2:46！