Question

所以在我的CSS文件中，我有：

a {
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

但我不希望所有链接都具有某种颜色/重量。那么我将如何创建它的特定“实例”，以便我可以为特定div（例如nav）中的所有HTML标记定义CSS，但不会影响该div之外的链接？

Answer 1

假设你的div有id nav并且你希望其中的所有链接都有这些样式......

#nav a {
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

或者，您可以将类分配给特定链接...

<a href="..." class="my-link-class">Link1</a>
<a href="..." class="my-link-class">Link2</a>

使用此css：

a.my-link-class {
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

Answer 2

只需将规则特定于div＃nav tag中的所有锚点：

#nav a {
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

Answer 3

您可以将“a”标签，选择器，ID或类别设为特定。像这样......

nav a{
    color:#f00;
    text-decoration:none;
    font-size:20px;
}
#menu a{
color:blue;
text-decoration:underline;
font-size:16px;
}
.menu a{
color:green;
text-decoration:underline;
font-size:14px;
}

Answer 4

您可以使用基本CSS语法和nav HTML5标记选择块中的特定链接：

nav a {  /* every "a" tag in nav blocks */
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

如果您有许多类或ID，您可以指定div：

div#nav a {  /* every "a" tag in nav block id="nav" */
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

Answer 5

在div id =“nav”中，所有“a”元素都具有相同的样式，就像你通过CSS设置它一样（就像你在下面看到的第一个div）。当鼠标悬停在“a”元素上时，您还可以创建第二个div来管理样式。

#nav a {
color:#00adef;
text-decoration: none;
font-weight:bold;}

#nav a:hover{
color:grey;
text-decoration: underline;
font-weight:bold;}

Answer 6

#a1 {
    color:#00adef;
    text-decoration: none;
    font-weight:bold
}

<a href="..." >Link</a>
<a href="..." id="a1">Link1</a>
<a href="..." >Link2</a>

如何为特定的“a”实例定义CSS？

6 个答案: