Question

更新：似乎我获得的CSS可能缺少“end”类选择器。这个论坛刚刚澄清说“end”只是用户定义的类选择器 - 没有什么特别之处。还了解到，可以通过用中间的空格分隔来使用多个类选择器。

原始问题：以下end属性中的class="col-4 end"有何作用？（如果我包含/排除“end”会有什么不同？

<div class="row">
  <div class="col-4">4 Columns</div>
  <div class="col-4">4 Columns</div>
  <div class="col-4 end">4 Columns</div>
</div>

相应的CSS选择器如下所示：

.row {
    width: 100%;
    display: flex;
}

.col-4 {
    width: 33.33%;
}

注意：我从Udacity HTML课程here中看到了这个HTML示例。我也会尝试从Udacity论坛中找到答案。（我一直在谷歌上搜索一段时间而且没有运气，包括the w3school class attribute page和Mozilla HTML guide。）

非常感谢提前。

Answer 1

function sum (a,b){ if(b == undefined){ return function(b){ return a + b; } } else { return a + b; } }属性采用空格分隔列表的类名。

class仅表示它是class="col-4 end"类和 col-4类的成员。

Answer 2

<div class="col-4 end">将类col-4和end分配给div。

您提供的内容中没有足够的信息。 end指的是一个单独的类，您提供的CSS未定义end类。仔细检查CSS的定义。

根据我的经验，标记为end的类通常用于调整元素行中最后一个元素的边距或间距，以确保它们均匀分布。

Answer 3

这只是意味着你将另一个名为'end'的类应用于最后一个div。将所有元素设置为样式，但在最后一个元素上具有不同的样式是很常见的。因此，应用于类'end'的任何样式都只匹配最后一个元素。如果你想要样式所有列然后你使用'.col-4'选择器，但如果你想要最后一个样式，那么你可以使用'.col-4.end'（注意没有空格 - ＆gt;它意味着比一个元素都有两个类。）

Answer 4

班级end本身就是一个班级。

在这些类型的div中，它通常用于关闭某些东西的直观表示。

对于列，它可能是这样的：

[class^="col-"] { /* This selector selects every class that starts col- */
    /* something related to all columns */
}
[class^="col-"].end { /* this selector is only for classes starting with col- and ending with .end */
    /* something related to the last column (with extra class "end") for example a border */
    border-bottom: 1px solid;   
}

HTML“class”属性中的“end”是什么意思？

4 个答案: