html - 根据类及其 href 内容设置链接样式

Question

我想创建一个特定于这个按钮的css，只有它有href="https://link.com/inst链接并且是类的btn btn-primary btn-block。

该类btn btn-primary btn-block是一个全局引导类，因此如果我只重新定义该类，它将更改网站中的任何其他按钮。

.btn .btn-primary .btn-block a[href^="https://link.com/inst"]{
    font-family:Verdana;
    font-size:22px;
    color:red;
}

<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>

我不知道如何将这两者结合在一起。

标签： htmlcss

Answer 1

您可以为<a>标签进行类分配。像这样：

a.btn.btn-primary.btn-block[href^="https://link.com/inst"] {}

a.btn.btn-primary.btn-block[href^="https://link.com/inst"] {
    font-family:Verdana;
    font-size:22px;
    color: red;
}

<a href="" class="btn btn-primary btn-block">Calculate Your Order</a>
<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>

第二种解决方案是在<a>标签的 css 中指定一个带有类的属性。像这样：

a[href^="https://link.com/inst"][class^="btn btn-primary btn-block"] {}

a[href^="https://link.com/inst"][class^="btn btn-primary btn-block"] {
    font-family:Verdana;
    font-size:22px;
    color: red;
}

<a href="" class="btn btn-primary btn-block">Calculate Your Order</a>
<a href="https://link.com/inst" class="btn btn-primary btn-block">Calculate Your Order</a>