Question

我想在元素中添加另一个类，但是其中一些元素已经有了一个现有的类，但是我要添加的类我希望它是在类字段中添加的first class而不是想要追加它;因为据我所知，一般来说，最后列出的类中的规则会覆盖前面的类中的规则，更正！？

我知道如下的jquery方法..

$("p").addClass("myClass");

但是根据我的理解，这只是附加课程而你无法选择放在哪里。

有没有办法轻松完成这项工作，还是我必须开始删除课程并重新添加课程？

Answer 1

不确定是否需要做这样的事情，我个人喜欢@bwoebi的建议只是改变特殊性。

但如果你需要它，这可能会有所帮助

<强> HTML

<div class="second">Lorem text</div>

<强>的jQuery

var $div = $('div'),
    classes = $div.attr('class');
$div.attr('class', 'first' + ' ' + classes);

您可以将包含类名称的变量放在'first'

的位置

Demo

Answer 2

如果您想在当前类中的特定索引处添加新类，只是为了好玩：

http://jsfiddle.net/ckzVk/

function addClassAtIndex(elementId,classNameToAdd,index){
    var element = document.getElementById(elementId);
    var elementClasses = element.className.split(" ");
    elementClasses.splice(index,0,classNameToAdd);
    var newClasses = elementClasses.join(" ");
    element.className = newClasses;
}

将类“man”添加到div：

<div id="stuff" class="cool bro sweet">The div.</div>

JS：

addClassAtIndex("stuff","man",1");

结果：

<div id="stuff" class="cool man bro sweet">The div.</div>

Answer 3

通过简单地使用空格分隔类，可以向元素添加多个类。例如：

<p class="key_paragraph dark no_border">Your text here</p>
<p class="key_paragraph dark">Your text here</p>

html属性中列出类的顺序无关紧要。重要的是样式表。

在样式表（css文件）中，如果您希望任何类覆盖另一个类，则可以更改样式表中规则的顺序。例如，如果类“dark”有边框而类'no_border'没有，则必须在样式表中的'dark'之后放置'no_border'，以确保'no_border'覆盖第一段的'dark'。像这样：

.dark {
    border: 2px solid red;
}

.no_border {
    border: none;
}

其次，无论css规则的顺序如何，都可以添加特异性。例如，组合类来表示“如果元素具有深色和红色类”，则比上述两个规则中的任何一个更具体。有关特异性的更多信息，请参阅here。因此，以下规则将确保在“dark”和“no_border”类的元素上没有边框，无论它们出现在stlesheet上的顺序如何：

.dark.no_border {
    border: none;
}

.dark {
    border: 2px solid red;
}

第三种选择是使用css：not选择器来定位所有不具有“no_border”类的“dark”类的元素。同样，样式表中的规则顺序在这里无关紧要。这样做如下：

.no_border {
    border: none;
}

.dark:not(.no_border) {
    border: 2px solid red;
}

还有其他方法可以做到这一点，但希望我以一种你能理解的方式解释了三种简单的方法。还有一个更具特定于jquery的演示here（参见第三个例子）。如果您有任何问题，请告诉我。

将另一个类添加到元素中，但作为第一个类

3 个答案: