Question

我想以不同的方式设置不同的超链接。现在，我有一个超链接的按钮，我想添加一个应该像超链接一样的文本。如何在不同时设置两个超链接的情况下执行此操作。我希望每个超链接都有不同的颜色，定位等。

CSS

.example2 {
    text-decoration: none;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    background-color: #CC4A31;
    color: #444;
    border-radius: 9px;
    position: absolute;
    top: 16px;
    left: 38px;
    height: 50px;
    width: 145px;
    webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    vertical-align: middle;
    text-align: center;
    line-height: 50px;
}

.example {
    color: black;
}

HTML

<div class="example2"> 
    <a href="">GameTrade</a>
</div>

<div class="example">
    <a href="">Sign in</a>
</div>

现在如何添加另一个单独设置样式的超链接？

Answer 1

你称之为样式的是，如果你不知道也称为CSS，它代表级联样式表，这种类型的语言允许你指定规则之间的层次结构。

说到这一点，在CSS中你可以有3种基本类型的样式规则，那些以元素的TAG为目标，以元素类为目标的那些（<a class="foo">my link</a>）和那些以元素为目标的元素。 ID（<a id="btnSubmit">submit</a>），我显然在这里隐藏了很多信息，目的是让您更容易理解。

为了达到目的，您可以创建一个使用TAG <a>定位元素的规则，并在规则中指定所有链接通用的属性。

这为您提供了已有的功能，现在您可以根据不同的链接定位两个选项，或者您可以给出不同的ID并分别定位每个ID，或者在class属性中添加一个类，以便区分两者。

以下是一个例子：

<强> HTML

<a class="link-trade1" href="">GameTrade 1</a><br/>
<a class="link-trade2" href="">GameTrade 2</a>

<强> CSS

a {
    text-decoration: none;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    background-color: #CC4A31;
    color: #444;
    border-radius: 9px;
    webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    vertical-align: middle;
    text-align: center;
}

.link-trade1{
    position: absolute;
    top: 16px;
    left: 38px;
    height: 50px;
    line-height: 50px;
    width: 145px;
}

.link-trade2{
    position: absolute;
    top: 16px; /* other y position for the link 2 */
    left: 38px; /* other x position for the link 2 */
    height: 50px;
    line-height: 50px;
    width: 145px;
}

如果您不打算重复使用针对特定类的规则，则可以切换ID的类名。

无论如何，如果你不熟悉CSS和HTML，你可以阅读非常好的book。快乐的编码。

<强>更新

更新的问题就是一个很好的例子，请注意：

/* this rule targets all hyperlinks inside, elements (div in your case) with attribute class="example" */
.example a{
    ... 
}

/* this rule targets all hyperlinks inside, elements with attribute class="example2" */
.example2 a{ 
    ... 
}

你可以看到，还记得我在谈论的层次结构吗？正因为如此，在上面的示例中，您首先将特定div作为示例类或example2类的目标，然后指定要在其中设置样式的元素。你可以建立更详细的规则！

Answer 2

使用您的HTML

<div class="example2"> 
    <a href="">GameTrade</a>
</div>

<div class="example">
    <a href="">Sign in</a>
</div>

我猜测样式不起作用，因为有CSS覆盖你的。试试这个CSS：

.example2 a {
    color: #444;
}

.example a {
    color: black;
}

如果不起作用，请尝试添加！important标记。

如何使用CSS单独设置超链接样式？

2 个答案: