0

所以我理解 HTML 类和 id 之间的区别；但是，我对如何在这种特殊情况下使用每个都有一些问题。

我有大约 25 个 div 元素（5 列，每列有 5 个内部 div）。我想为每个样式使用一致的样式，所以我为 CSS 使用了类。现在问题来了，我需要能够识别每个特定的 div，因为我使用的是 JQuery 和 Javascript，但我不能同时使用类和 id，因为我必须为每个类创建一个独特的 CSS 样式，这会失败一起使用类的目的。

这是我正在处理的 HTML 代码：

<div class="ts8-10" id="dfwef">
<ul>
    <li>Jans Smith</li>
    <li><a href="#">Open Time</a></li>
</ul>
</div>

我知道这个问题可能有点主观，但我试图弄清楚如何保持使用类的优势（能够设置多个元素的样式），同时还能够使用 id 识别每个元素。

当我将 ID 添加到类时，类提供的所有样式都丢失了。我知道我可以使用 CSS .ts8-10#aa，但是我必须对 25 个元素中的每一个都这样做。

有什么建议么？

编辑：

如果需要，这里是 CSS：

    .ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:95%;
    height:15%;
    font-size: 28px; 
    text-align: center;
    padding:5px;
    margin-top: 5px;    
}
4

6 回答 6

4

不能同时使用类和 id，因为我必须为每个类创建一个独特的 CSS 样式

不是这样。您只需编写具有应用通用样式的类选择器的规则集，以及具有应用独特样式的 id 选择器的其他规则集。

可以应用于给定元素的规则集的数量没有限制。

如果两个规则集匹配一个元素并为相同的属性提供值，那么级联就会发挥作用。这是 CSS 的一个基本部分，以至于在语言名称中提到了它。

于 2013-11-07T20:02:41.860 回答
0

有班级和身份证。您的 CSS 可以使用类，而 Javascript 可以使用 id。

或者（不太推荐），您可以在 jQuery 中使用第 n 个子选择器。

于 2013-11-07T20:02:38.627 回答
0

Class = 您计划多次使用的样式。

ID = 将被识别或使用的 div（取决于设计偏好，将 ID 用于仅存在一次的事物与基于唯一性的 javascript 功能）仅一次。

你可以做类似的事情<input type="text" class="form_textbox" id="FORM_name" name="name">

逻辑：

  • 使用类，因为此表单上的文本框都具有相同的样式

  • 为 JS/jQ 表单处理目的使用一个 ID 来唯一标识它

现在更有意义..？

于 2013-11-07T20:05:12.343 回答
0

ID 比类具有更高的特异性

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以做很多事情..例如，您可以采用以下 CSS 规则：

.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
  border-style: solid;
  border-width: 1px;
  border-color: black; 
  width:95%;
  height:15%;
  font-size: 28px; 
  text-align: center;
  padding:5px;
  margin-top: 5px;    
}

并将其更改为这个，因为它们都是 .truck 的第一个孩子：

.truck > div
{
  border-style: solid;
  border-width: 1px;
  border-color: black; 
  width:95%;
  height:15%;
  font-size: 28px; 
  text-align: center;
  padding:5px;
  margin-top: 5px;    
}

大于 (>) 符号基本上可以找到 .truck 的任何第一个孩子

您也可以尝试仅定位标签，因为您基本上在列中重复相同的内容块

于 2013-11-07T20:11:56.087 回答
0

很难说出你的实际问题是什么。也就是说，你不需要#aa在你的 CSS 中使用它，只是因为你在 HTML 中使用了它。HTML 根本不需要 CSS。

此外，#aa { }在样式表中包含 id 不会对具有 id 的元素产生影响aa，因为在该规则中没有声明任何样式。没有声明样式并不意味着一切都被重置为虚无。这只是意味着没有任何东西可以覆盖适用于它的先前声明。

如果需要，您可以在一个元素上使用多个类来创建最终外观，或以其他方式将元素与其他元素分组（例如，如果您希望 JavaScript 将日期选择器放在“日期”字段上，则可以使用该类将它们全部击中）。你也可以在同一个元素上有一个 id 和一个类，只要你不为那个 id 添加 CSS，这个 id 就不会影响元素的外观。

于 2013-11-07T20:13:24.480 回答
0

ID 优先于类。类不必是唯一的，ID 必须是唯一的。

此外，如果使用 Vanilla JavaScript，它可用于轻松选择具有相应 ID 的元素。

document.getElementById('idOfDiv');

如果您有以下 HTML 标记

<div id="div1" class="divClass">
     <span>Cool Div</span>
   </div>

CSS 看起来像这样：

 .divClass{
      color:#ff0000;
   }
 #div1{
      color:#000;
   }

文本的颜色将#000像上面所说的 id 优先。

要为每个列创建特定样式，请创建一个稳定的类

.stable{
   width:200px;
   min-height:200px;
   height:auto;
   border-left:1px solid;
   border-right:1px solid;
 }

然后，如果我们需要更改其他元素的某些标准，我们可以这样做

.otherClassCol1{
  border-color:#ff0000;
  background:#fff;   
}
.otherClassCol2{
  border-color:#00ff00;
  background:#0000ff;   
}

您也可以更改其他标准，以选择 id 为col4per say的选择元素

 #col4.stable{
     width:300px;
  }

我们添加特定的原因#col4.stable是为了如果 ID 在另一个页面上但没有.stable我们的样式不会被覆盖。这样做是改变 col4 中的 stable 类，并通过100px在 CSS 中编写选择器的多种方法来增大宽度。

示例http://jsfiddle.net/tw6uA/

于 2013-11-07T20:17:14.213 回答