内联链接的不同样式

Question

        <div class="col-lg-3">
         <ul class="nav navbar-nav login-right">
            <li><a href="#" style="padding: 0">Login</a> or <a href="#" style="padding: 0;">create account</a></li>
         </ul>
        </div>

简单的问题，如何在 CSS 中编写类以及如何命名它以使这两个链接具有不同的颜色，以及在外部 CSS 中移动内联样式。

我尝试为每个链接提供普通类，只是在外部 CSS 文件中调用这些类，但解决方案失败。

有什么想法吗？

Answer 1

简单的问题，如何在 CSS 中编写类以及如何命名它以使这两个链接具有不同的颜色，以及在外部 CSS 中移动内联样式。

您可以使用nth-child 并为a 标记不同的颜色

ul.nav li a:nth-child(1){ color:green; }

还有

ul.nav li a:nth-child(2){ color:blue; }

由于两者具有相同的padding 样式，您可以将其放在一个通用样式定义中

ul.nav li a{ padding:0; }

重要提示：确保您写入的外部文件位于 HTML 层次结构的最后。根据 CSS 优先级规则，最后放置在层次结构中的文件获得优先级。

编辑：似乎您有许多具有相同结构的元素。在这种情况下，最好选择特定元素，使用id 将是我们的最佳选择。如下将id 添加到您的ul

<ul id="colorMe" class="nav navbar-nav login-right">

并将您的 CSS 选择器更改为

#colorMe li a:nth-child(1)

也与其他选择器类似