Question

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

这是一个来自bootstrap示例的片段。注意到它在一个标签中有多个类，那么这两个类之间的关系是什么？似乎表格条纹是表的子类？

css将如何改变这个元素的风格？ 表格条纹的样式是否会覆盖表格的样式？

更进一步，我应该如何按类选择这个元素？

Answer 1

我看到你还在这里学习东西，如果我要建议，为了远离框架，直到你了解基本的东西是如何工作的，为了更好地学习，那么跳跃将导致并发症。虽然无论如何：

你提到的类根本没有关系，实际上所有的CSS类都没有关系。例如，他们脱颖而出：

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

另一个是：

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

在包含table-striped类table的表格中调用table-striped时，只会覆盖table border的公共属性，并将其应用于元素。

它如何覆盖？这是我在CSS中称之为优先级的东西，无论哪种样式最后都会应用，但是稍后您会遇到CSS覆盖不适用于所有IF选择器不匹配。

最后一件事：你怎么选择这个班级并不重要：

.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...

根本不重要。希望能帮助您理解。

Answer 2

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

您可以根据每个元素或两者选择元素

＆＃13;

.cls-a {
  background: red;
}
.cls-b {
  color: blue;
}
.cls-a.cls-b {
  border: 2px solid green;
}

＆＃13;

<div class="cls-a cls-b">Test</div>

＆＃13;

Answer 3

多个类并不意味着它们彼此有任何关系。据我所知，<table class="table table-striped">与<table class="table-striped table ">完全相同。

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

.table
.table-stripped
.table.table-stripped或.table-stripped.table

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

Answer 4

这些只是bootstrap css样式，你可以在一个元素上拥有你想要的尽可能多的类。您可以在表条带后再添加一个类，创建自己的.css文件并根据需要进行编辑。或者你可以在表格中添加id并将其设置为样式。

html多个类在一个标签

4 个答案: