html在一个标签中包含多个类

这是一个引导示例的片段。 注意到它在一个标签中有多个类，那么这两个类之间的关系是什么呢？似乎条带化表是table的一个子类

css将如何改变这个元素的样式？条带化表格的样式会覆盖表格的样式吗

---

此外，我应该如何按类选择此元素？

浏览器将使用两个类中的值，并将它们应用于该元素

可以基于它们中的每一个或两个选择元素

.cls-a{ 背景：红色； } .cls-b{ 颜色：蓝色； } .cls-a.cls-b{ 边框：2倍纯绿； }

---

测试多个类别之间没有任何关系并不意味着它们之间有任何关系。据我所知，完全一样

您可以使用具有以下任意组合的类来选择此表：

桌子 .桌子被剥去 .table.table-stripped或.table-stripped.table

---

CSS将如何受到影响取决于样式。根据名称，我假设.table将其样式设置为所有引导表。表格将为奇数行和偶数行添加不同的背景色

这些只是引导式css样式，您可以在一个元素上拥有任意多的类。您可以在表条带化后再添加一个类，创建自己的.css文件并根据需要编辑它。或者您可以将id添加到表中，并将其设置为那样的样式

我看到你还在这里学习东西，如果我想说，为了学习，最好先远离框架，直到你了解基本的东西是如何工作的，那么向前跳只会导致复杂化。尽管如此：

您提到的类根本没有关系，实际上所有CSS类根本没有关系。他们独树一帜，例如：

<table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
</table>

另一个是：

.table {
  border: 1px solid black;
  width: 100%;
  // other common properties you find in a table
}

在包含table类的表中调用table striped时，table striped只会覆盖作为边界的table的公共属性，并将其应用于元素

它如何覆盖？这是我在CSS中称之为优先的东西，无论最后一个样式是什么，它都会被应用，尽管稍后您会遇到CSS覆盖，如果选择器不匹配，则根本不应用

最后一件事：你如何选择这个类并不重要：

.table-striped {
  border: 1px dashed black;
  // other properties you can find on a striped table
}

---

没关系。希望这能帮助您理解。

如果cls-a和cls-b的css中存在相同属性的冲突，该怎么办？哪一个将被覆盖？顺序重要吗？我的意思是class=cls-a cls-b和class=cls-b cls-aThis与css中的特异性有关，你可以检查一下这个例子：css类的顺序只有在使用属性选择器时才开始起作用伟大的答案！根据我的经验，.table striped通常意味着偶数行和奇数行有不同的背景色。这只是其他属性。table striped可以提供。由于我的示例仅适用于顶级元素，因此稍后将出现.table striped tr td:nth childeven{//stuff}，您在.table classis中找不到它。如果您觉得它很有用并回答了您的问题，请不要忘记将其标记为答案。

.table {
   // stuff
}

.table-striped {
   // stuff
}

// if selector contains both classes
.table.table-striped {
   // stuff
}

// if a table element contains .table class
table.table {
   // stuff
}

// and so on...