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)

也与其他选择器类似

内联链接的不同样式

1 个答案: