html - 我希望此 CSS 应用于类为 'details' 的 HTML 元素中的那些

Question

这应该相对容易，但我似乎无法将以下 css 列表包装成只对具有“详细信息”类的 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;
    }