是否可以使用CSS选择特定的网格列或行?
例如,假设我有一个3行2列的CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。如何从第二列中选择所有元素?例如:(grid:nth-child(column:2)仅是我的主意,无效的代码)。
grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;
grid:nth-child(column:2)
我已经尝试过nth-child在div元素上使用选择器,但是当网格布局引擎自动放置项目时,这不允许我指定行或列。
nth-child
div
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 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 Name</p> <p>Element 1 | Element 2</p> </div>
CSS无法实现。
CSS针对HTML元素,属性和属性值。
网格列和行没有这些“挂钩”。
您必须直接定位网格项目。
你写了:
例如,假设我有一个3行2列的CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template- columns: 1fr 1fr;。如何从第二列中选择所有元素?
grid-template-rows: 1fr 1fr 1fr; grid-template- columns: 1fr 1fr;
grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; padding: 10px; height: 50vh; background-color: gray; } grid-item { background-color: lightgreen; } grid-item:nth-child(2n) { border: 2px dashed red; } <grid-container> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> <grid-item></grid-item> </grid-container>