Question

这应该相对容易，但我似乎无法用以下方式包含以下css列表：它只对具有“＆te;详细信息”类的div中的html元素生效。实现这一目标的最佳方法是什么？

table {
width: 100%;
margin: 0 0 20px;
margin-top:20px;
border-collapse: separate;
border-collapse: collapse; */
border-spacing: 0;
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

th {
color: #888;
font-size: 11px;
font-weight: 400;
line-height: 18px;
margin-bottom: 5px;
padding: 0 0 5px;
text-transform: uppercase;
font-size: 12px;
width: 33.333%;
font-size: 12px;
line-height: 18px;
padding: 7px 10px;
text-align: left;
vertical-align: top;
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

td ,.detailText{
font-size: 13px;
font-weight: 600;
padding: 0 5px 0 0;
line-height: 18px;
}

Answer 1

在您的HTML中，使用<div class="details">

这是你的CSS

.details table {
    width: 100%;
    margin: 0 0 20px;
    margin-top:20px;
    border-collapse: separate;
    border-collapse: collapse; */
    border-spacing: 0;
    }

.details tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    }

.details th {
    color: #888;
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 5px;
    padding: 0 0 5px;
    text-transform: uppercase;
    font-size: 12px;
    width: 33.333%;
    font-size: 12px;
    line-height: 18px;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    }

.details tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    }

.details td ,.detailText{
    font-size: 13px;
    font-weight: 600;
    padding: 0 5px 0 0;
    line-height: 18px;
    }

Answer 2

只需将.details添加到您的所有选择器中，例如

.details table {
    width: 100%;
    margin: 0 0 20px;
    margin-top:20px;
    border-collapse: separate;
    border-collapse: collapse; */
    border-spacing: 0;
}

.details tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
/* So on and so forth */

...等等。如果要在CSS块中应用它（如评论中所述），则必须查看CSS预处理器，例如LESS或SASS 。用SCSS语法（more in depth description）编写的SASS示例如下：

.details {
    table {
        width: 100%;
        margin: 0 0 20px;
        margin-top:20px;
        border-collapse: separate;
        border-collapse: collapse; */
        border-spacing: 0;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    th {
        color: #888;
        font-size: 11px;
        font-weight: 400;
        line-height: 18px;
        margin-bottom: 5px;
        padding: 0 0 5px;
        text-transform: uppercase;
        font-size: 12px;
        width: 33.333%;
        font-size: 12px;
        line-height: 18px;
        padding: 7px 10px;
        text-align: left;
        vertical-align: top;
    }

    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    td ,.detailText{
        font-size: 13px;
        font-weight: 600;
        padding: 0 5px 0 0;
        line-height: 18px;
    }
}

Answer 3

好吧，我会删除您的标题以使用id（您的说明为class）。

只需将id添加到CSS元素中。

#details table { ... }

#details tr {... }

等

它与一个类一样，只是不同的标记。

.details table { ... }

.details tr {... }

完整样本：

#details p {
  color: red;
}

<p>Paragraph.</p>
<div id="details">
  <p>Details paragraph.</p>
</div>

我希望这个CSS适用于带有“详细信息”类的HTML元素中的CSS

3 个答案: