Question

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

我有大约25个div元素（5列，每列有5个内部div）。我想为每个使用一致的样式，所以我使用CSS的类。问题出现了，我需要能够识别每个特定的div，因为我正在使用JQuery＆amp; 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;    
}

Answer 1

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

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

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

如果两个规则集匹配一个元素并为相同的属性提供值，则cascade开始起作用。这是CSS的一个基本部分，它以语言名称提及。

Answer 2

有课程和ID。您的CSS可以使用该类，Javascript可以使用ID。

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

Answer 3

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

ID =将被识别或使用的div（取决于使用ID仅存在一次的内容而不是基于唯一性的javascript功能）只有一次。

您可以执行<input type="text" class="form_textbox" id="FORM_name" name="name">

之类的操作

逻辑：

使用类，因为此表单上的文本框都具有相同的样式
使用ID为JS / jQ表单处理目的唯一标识

现在更有意义了吗？？

Answer 4

ID比Classes具有更高的特异性

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

大于（＆gt;）的符号基本上会找到.truck的第一个孩子

您也可以尝试定位代码，因为您的列中基本上重复了相同的内容块

Answer 5

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

此外，在样式表中使用#aa { }对aa id的元素没有影响，因为该规则中没有声明样式。没有声明的样式并不意味着一切都被重置为虚无。它只是意味着没有什么能覆盖以前适用于它的声明。

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

Answer 6

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

此外，如果使用Vanilla JavaScript，则可以使用相应的ID轻松选择该元素。

document.getElementById('idOfDiv');

如果您有以下HTML Mark Up

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

CSS看起来像这样：

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

文本的颜色为#000，因为id的优先级如上所述。

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

.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为col4的select元素的其他critera

 #col4.stable{
     width:300px;
  }

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

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

如何使用HTML类和ID

6 个答案: