Question

我正在努力了解ID＆amp; class在以下类中工作，

例如： - #switcher .button将选择id = switcher的所有元素，但我想知道.button如何选择“按钮选择”类..

HTML

<div id="switcher">
        <h3>Style Switcher</h3>
        <div class="button selected" id="switcher-normal">Normal</div>
        <div class="button" id="switcher-narrow">Narrow Column</div>
        <div class="button" id="switcher-large">Large Print</div>
 </div>

ID

#switcher {
  float: right;
  background-color: #ddd;
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  font-size: .9em;
}
#switcher h3 {
  margin: 0;
}
#switcher .button {
  width: 100px;
  float: left;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-bottom: 3px solid #444;
  border-right: 3px solid #444;
}

Answer 1

类允许您选择多个元素或多个类。

ID允许您引用单个特定元素。

类应该用空格分隔，你只能有一个ID

对于HTML：

<div id="switcher">
    <h3>Style Switcher</h3>
    <div class="button selected" id="switcher-normal">Normal</div>
    <div class="button" id="switcher-narrow">Narrow Column</div>
    <div class="button" id="switcher-large">Large Print</div>
</div>

使用CSS，您可以选择

.button选择button作为班级

的所有项目

或

.selected选择selected作为班级

的所有项目

或

#switcher .selected表示selected作为其中switcher作为其ID的元素内的类的所有项目。

或

对于同时将.button.selected和button作为班级的所有项目，

selected

或

#switcher .button.selected表示同时包含button和selected的所有项目，并且位于ID为switcher的元素内

Answer 2

DOM的单个类属性将匹配任何CSS类选择器，该选择器与由空格分隔的类属性的子字符串相同。例如，带class="button selected"的DOM会匹配CSS选择器.button或.selected。

Answer 3

首先，#switcher .button不会选择班级selected。如果您希望实现这一目标，则需要使用#switcher .button:first-child或#switcher .button.selected，如果您只想让第一个孩子拥有selected班级或`#switcher .button选中此选项以从此#switcher .button后代选择器中选择值。

Answer 4

类和id之间的核心区别在于 id始终是唯一的，您可以根据需要使用尽可能多的相同类。

你说：

例如： - ＃switcher .button将选择带有id =的所有元素 切换器

事实并非如此。它实际上将选择具有类“按钮”的所有元素，其中父元素具有ID“切换器”。

你问：

想知道.button如何选择“按钮选择”类..

你应该注意class="button selected"定义了两个类。这个空间是新课程的理想之地。因此，可以使用.button AND .selected来定义此元素。

您的元素具有类.button，这就是它被选中的原因。

我建议在网上阅读一些关于css选择器，ID和类的基本教程。

希望这有助于你！

类和ID的区别

4 个答案: