改变一个元素的样式而不改变另一个？答案

【问题标题】：change style of one element without changeing the other?改变一个元素的样式而不改变另一个？
【发布时间】：2011-12-14 14:06:24
【问题描述】：

对不起，这个问题没有意义，但我会解释一下。我有两个超链接

<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>

【问题讨论】：

标签： javascript jquery css class styles

【解决方案1】：

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

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

Here's a live example.

【讨论】：

【解决方案2】：

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

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

你只需要添加一个空格

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

假设你不能/不会改变实际的标记，试试这个（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");        
});

【讨论】：

而不是.css("color", "#000"); 是否可以应用id或更改类？
@user1010031 绝对是。一旦你通过选择器获得了元素，你就可以对它做任何你想做的事情
怎么样？它的实际 jquery 是什么？
@user1010031 如果您不需要支持 IE6 并且您的链接实际上具有 href 属性，那么迈克尔的回答是 much 更好

【解决方案5】：

替代 1

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

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

替代 2

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

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

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

替代 3

或者你可以给那个锚点一个额外的class：

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

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

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案7】：

我认为“主页”链接是这些序列中的第一个链接，所以为什么不使用

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

【讨论】：