Question

抱歉这个问题没有意义，但我会解释。我有两个超链接

<a href="" class="menu-link">home</a>
<a href="" class="menu-link">blog</a>

我想应用这种风格

<style>
.menu-link{color:#000;}
</style>

但仅适用于<a href="" class="menu-link">home</a>除了实际更改下面的类

外，如何做到这一点

<a href="" class="menu-link-1">home</a>
<a href="" class="menu-link-2">blog</a>

Answer 1

如果您无法修改标记以添加其他类，则可以通过其href属性选择一个元素，假设它有一个：

a.menu-link[href='home.html'] {
  color: #000;
}

Here's a live example.

Answer 2

您可以将多个类分配给单个元素。

<a href="" class="menu-link home">home</a>
<a href="" class="menu-link">blog</a>

你只需要添加一个空格

<style>
.menu-link.home{color:#000;}
</style>

Answer 3

假设你不能/不会改变实际的标记，试试这个（jQuery）

jQuery(function($) {
    var home = $("a.menu-link:contains('home')");

    // change style
    home.css("color", "#000");

    // add class
    home.addClass("other-class");

    // remove class
    home.removeClass("menu-link");

    // add / change attributes
    home.attr("id", "some-id");        
});

Answer 4

也许这个解决方案可以满足您的需求。

<a href="" class="menu-link black">home</a>
<a href="" class="menu-link">blog</a>

<style>
.menu-link{}
.black {color:#000;}
</style>

Answer 5

Alt 1

您可以为该锚点添加style属性：

<a href="" class="menu-link" style="color:#000;">home</a>

替补2

或者您可以向该锚点添加id：

<a href="" class="menu-link" id="specialstyle">home</a>

，并将.menu-link替换为您的css中的#specialstyle。

Alt 3

或者您可以为该锚添加额外的class：

<a href="" class="menu-link menu-link-special">home</a>

，并将.menu-link替换为您的css中的.menu-link-special。

Answer 6

您可以使用您想要的样式向menu-link-1添加另一个类：

<style>a.home { color: #000; }</style>
<a href="" class="menu-link-1 home">home</a>
<a href="" class="menu-link-2">blog</a>

编辑：显然，如果我阅读了这个问题，我会注意到作者不想更改这些类..

Answer 7

我认为'home'链接是这些序列中的第一个，所以为什么不使用

.menu-link { color: <your_default_color>; }
.menu-link:first-child { color: #000; }

改变一个元素的风格而不改变另一个元素？

7 个答案:

Alt 1

替补2

Alt 3