是否可以使用CSS选择特定的网格列或行？
例如,假设我有一个3行×2列CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;.如何从第2列中选择所有元素？例如:( grid:nth-child(column:2)只是我的想法,不是有效的代码).
我已经nth-child在div元素上尝试了选择器,但这不允许我在Grid Layout引擎自动放置项目时指定行或列.
body {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
background: #999;
}<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Right Justify</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer Name</p>
<p>Element 1 | Element 2</p>
</div>
<div class="item">
<p>Customer …这是一个用CSS Grid Layout创建的表,但我遇到了问题,我无法在每一行上创建悬停状态.
我只想使用CSS.
任何人都可以给我一个解决方案吗？
.table {
display: grid;
grid-template-columns: [col-start] auto [col-end];
grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end];
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-gap: 1px;
}
.table>* {
background: gray;
padding: 10px;
}
.heading {
background: navy;
color: #fff;
grid-row: header;
}<div class="table">
<div class="heading">Title 1</div>
<div class="heading">Title 2</div>
<div class="heading">Title 3</div>
<div class="heading">Title 4</div>
<div class="heading">Title 5</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 1</div>
<div class="row">Row 2</div>
<div class="row">Row …