内联链接的不同样式

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中写class以及如何命名它来为这两个link制作不同的颜色，以及如何在外部移动内联样式CSS.

我试图给每个 link 正常的 class 并且只是在外部 CSS 文件中调用那个 classes 但是解决方案失败了。

有什么想法吗？

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 样式，您可以将其放在通用样式定义中

ul.nav li a{ padding:0; }

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

Edit: 看起来你有很多具有相同结构的元素。在这种情况下，最好使用 select 特定元素，使用 id 将是我们的最佳选择。将 id 添加到您的 ul 如下

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

并将您的 CSS select 更改为

#colorMe li a:nth-child(1)

和其他人一样select或者也

内联链接的不同样式

Different styles for inline links

css

href

twitter-bootstrap