html 一个标签中的多个类

debugcn 发表于 Dev

Ziqi Liu

<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-striped是table的子类？

css将如何改变这个元素的样式？请问样式表条纹覆盖的样式表？

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

大师赛

我看到你仍然在这里学习东西，如果我要建议为了学习而先远离框架，直到你了解基本的东西是如何工作的，那么跳到前面只会导致复杂化。虽然无论如何：

你提到的类根本没有关系，实际上所有的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在包含tableclass的表中调用时，table-striped只会覆盖tableis的公共属性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...

不要紧。希望能帮助你理解。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。