我有一个简单的表格标记:
<div class="table">
<div class="table__headers"></div>
<div class="table__row"></div>
<div class="table__row"></div>
</div>
我已经使用这个 CSS 对其进行了样式设置:
<style lang="scss" scoped>
.grid {
display: grid;
grid-gap: 0.5rem;
}
.table {
&__headers,
&__row {
@extend .grid;
padding: 0.5rem 0.75rem;
:first-child {
text-align: start;
}
:last-child {
text-align: end;
}
p {
font-size: 0.8rem;
font-weight: bold;
text-align: center;
margin: 0;
}
}
&__row {
background: #f8f8fa;
}
}
</style>
我唯一的问题是我无法专门针对第一个和最后一个 table__row
元素,因此我可以为它们设置不同的样式。
以下不起作用:
&__row:first-of-type {
border: solid 1px red;
}
&__row:last-of-type {
border: solid 1px blue;
}
last-of-type
有效,但不是第一个。任何帮助,将不胜感激!
谢谢,
这是一个 JavaScript 解决方案:
let rows = document.querySelectorAll(".table__row"); // Get all rows into an "array-like" object
rows[0].classList.add("firstRow"); // Get and style first row
rows[rows.length-1].classList.add("lastRow"); // Get and style last row
.firstRow { background-color:red; }
.lastRow { background-color:green; }
<div class="table">
<div class="table__headers"></div>
<div class="table__row">blah</div>
<div class="table__row">blah</div>
<div class="table__row">blah</div>
<div class="table__row">blah</div>
<div class="table__row">blah</div>
<div class="table__row">blah</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句