Question

在几个jquery教程中，单独的ID和Class用于JS和CSS。例如

<div id="test" class="test">TEST</div>

在jQuery代码中使用了ID，Class中使用了CSS。对我而言，更容易不引入Class并使用ID进行CSS规则。使用css-less ID对于javascript有什么好处吗？

编辑：谢谢大家！我知道ID和Class之间的区别;我问为什么有些ID和Class分别用于JS和CSS。在这里，问题是ID唯一性的必要性。案例是分离JS和CSS任务（虽然它们紧密纠缠在一起）。

EDIT2：根据要求，我举了一个典型的例子：Tutorial。寻找actionsBox; .actionsBox已用于CSS和#actionsBox JS。如您所见，只有一个<div>，因此ID足以进行样式化。

Answer 1

阅读“Don't use class names to find HTML elements with JS”，原因可能是您希望避免在JavaScript中使用类名。

这一切都归结为个人偏好，真的。

Answer 2

修改 @Sharon commented a link to a great article，讨论了在CSS中使用id选择器的弊端。

人们可能只在CSS中使用类的一个原因是id选择器的特殊性。

如果你有一个元素的两个样式声明，并且它们为一个属性指定了不同的值，那么带有更具体选择器的样式声明将胜出。

例如：

HTML

<div id="test" class="special-test"></div>

CSS

#test {
    color: red;
}

.special-test {
    color: blue;
}

ID选择器胜过所有其他选择器以获得特异性（请参阅http://www.w3.org/TR/selectors/#specificity了解规则），因此<div>将为红色。

将class="test"添加到<div>的人可能已经写了这个：

HTML

<div id="test" class="test special-test"></div>

CSS

.test {
    color: red;
}

.special-test {
    color: blue;
}

当两个样式声明都具有相同特异性的选择器时，后面的声明会胜出，所以这里<div>将为蓝色。

就个人而言，我从未发现这是一个问题。在第一个示例中，您只需编写以使<div>蓝色为蓝色即可：

#test.special-test {
    color: blue;
}

但是我猜有些人发现这种特殊性方面不必要地复杂，因此只能在CSS中使用类选择器来避免它。

（我假设他们保留id因为id在JavaScript中检索DOM元素比按类检索更快。）

Answer 3

您可以同时使用ID和Class同时使用javascript和css。例如：

CSS

/*ID as identifier*/
#some_id {
    <css attributes>
}

/*Class as identifier*/
.some_class {
    <css attributes>
}

使用Javascript：

/*Get by ID*/
document.getElementById("some_id");
/*Get by class*/
document.getElementsByClassName("some_class");

两者之间的区别在于ID将是或者至少应该是唯一的，因此在应用css规则或分别通过javascript选择时，它只会影响或返回单个元素。另一方面，类别用于影响或选择具有类似性质或分类的元素。

如果你有一个有十辆车的停车场并且你要说“我想要三号空间的车”你会期望一次返回，而你是说“我想从停车场看福特” “你希望将停放在福特停车场的每辆车归还。 Css和javascipt使用ID和Class也不例外。

编辑：根据OP新重新定义的提问行。

css和ID：

Css可以利用ID作为锚点，以便识别唯一标识的DOM对象的内容。考虑下面的css。

#some_id tr:nth-child(odd) {
    background-color:#666888;
}

在上面的示例中，css绑定到唯一标识符，在这种情况下，ID被分配给表，但css规则本身应用于表中的奇数行。换句话说，在这种情况下，css会影响表行元素，其中TR本身是一个对象类（不要与css类混淆）。

简而言之，至少对于ID，在css中使用ID以及当你认为jQuery和支持基于类的查询在javascript中使用Class进行选择时也很有用。

Answer 4

对javascript和CSS中“ID”的双重性质感到好奇。如果您从w3schools访问此示例：http://www.w3schools.com/js/tryit.asp?filename=tryjs_blocks 你会看到哪个是“命名”这个特殊的＆lt; div＆gt;名为“myDiv”。这是因为稍后使用javascript getElementById（“myDiv”）来修改此特定＆lt; div＆gt;

的文本内容

但是 - 如果你添加代码行：＆LT;风格＆GT; #myDiv {color：blue; }＆lt; / style＆gt;

您现在拥有一个与javascript＆lt; div id＆gt;

同名的CSS ID

w3schools中的示例代码确实改变了＆lt; div＆gt;的颜色。称为“myDiv”为蓝色。但是当你按下该页面上的“试试”按钮时，javascript的内容＆lt; div＆gt;也是变化，这是w3schools例子的重点。也就是说，它教你getElementById（“myDiv”）是如何检索和修改命名的＆lt; div＆gt;的内容的。

但是因为同名的CSS #myDiv id有效，所以＆lt; div＆gt;内容已更改，并且由于样式表而保持蓝色所以当你看到一个＆lt; div id =“myDiv”＆gt;在HTML页面内，你如何知道这个＆lt; div＆gt;想要CSS id治疗吗？或者如果这个＆lt; div＆gt;将被一些javascript getElementById（）方法引用？

Answer 5

也许你应该看看ID和Classes之间的区别：

http://css-tricks.com/the-difference-between-id-and-class/

我从未听说过只在CSS中使用类，而且只在JavaScript中使用ID。

主要的是ID是唯一的，这就是为什么它们被称为标识符。如果您在网页上反复使用div的样式，则应使用类来设置样式。

编辑：这不常见，也可能不允许，我不确定，ID是以数字开头的！

Answer 6

我应该（读：必须）是唯一的。类是一组具有相似性的对象，例如页面上的所有列表应该看起来相同（但是你应该使用列表选择器而不是单独的类。

他们有不同的目的。

Answer 7

您可以在JS和/或CSS中使用id和/或class。这一切都取决于你想要选择的内容。如果要选择单个DOM元素，请随意使用id。如果您想选择一组相关元素，最好使用class。

JS和CSS的独立ID和类

7 个答案:

HTML

CSS

HTML

CSS