css - 内联链接的不同样式

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

Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.

您可以使用 nth-child和颜色 a标签不同

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

和

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

因为两者有相同的padding style 你可以把它放在一个通用的样式定义中

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)

也和其他选择器一样做​​