我想为某些网格列中的项添加样式(主要是最后一列).是否有一个css选择器可以让我设置这些项目的样式？
例如,在本演示中,我如何设置方框3,5和9(codepen here)的样式？
.grID-container { display:grID; grID-template-columns: 1fr 1fr 1fr; grID-column-gap: 1em; grID-row-gap: 1em; } .grID-item { background-color: #aea; text-align:center; Font-size:3em; min-height:3em; line-height: 3em; } .grID-item.double { grID-column-start: span 2; grID-row-start: span 2; } <body><div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <div >9</div> <div >10</div></div></body>
编辑：代码将以CMS结尾,并可能在将来更改.
解决方法 使用CSS渲染网格时,没有用于匹配某些网格位置中元素的选择器. grid-structural selectors introduced in Selectors 4只匹配基于文档语义表达的网格结构的元素,例如HTML中的表格(这也意味着当它们是使用display：table- *呈现的非表格元素时,它们无法匹配基于网格语义的元素).flexBox存在类似的问题：没有选择器可根据布局方式匹配特定的d性项目.通常,没有选择器根据CSS的布局来匹配元素.选择器仅匹配基于文档语义的元素(源顺序等).
要设置所需元素的样式,您需要使用其他方法(例如客户端脚本)或某些后端逻辑来标识它们,这些后端逻辑根据网格位置标记具有类的元素(如果在后端配置网格布局) .你如何做到这一点超出了这个问题的范围.
总结以上是内存溢出为你收集整理的html – 是否存在以某些网格位置为目标元素的选择器？全部内容，希望文章能够帮你解决html – 是否存在以某些网格位置为目标元素的选择器？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）