是否存在針對特定網格位置元素的選擇器？

我有一堆自動流動的網格物品的CSS網格。有時網格物品是一個1 x 1軌道，有時它們是2 x 2軌道，所以我不知道從源訂單哪些項目將在網格中的某些位置。這意味着與:nth-child()造型將不可靠。是否存在針對特定網格位置元素的選擇器？

我想添加樣式到某些網格列中的項目（主要是最後一列）。有沒有一個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 class="grid-container"> 
 

 
    <div class="grid-item">1</div> 
 
    <div class="grid-item">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item double">5</div> 
 
    <div class="grid-item">6</div> 
 
    <div class="grid-item">7</div> 
 
    <div class="grid-item">8</div> 
 
    <div class="grid-item">9</div> 
 
    <div class="grid-item">10</div> 
 
</div> 
 
</body>

編輯：代碼將在CMS結束，並在將來可能會改變。

來源

2017-05-24 John B

也許[這個問題]（https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system）可以幫助你以某種方式？ –

@kevinb。這是引導「網格」框架。 OP'using CSS native' display：grid;' –

爲什麼不使用'：nth-child'？ –

當網格使用CSS呈現時，在某些網格位置沒有匹配元素的選擇器。 grid-structural selectors introduced in Selectors 4只匹配基於文檔語義中表示的網格結構的元素，例如HTML中的表格（這也意味着當它們是使用display: table-*呈現的非表格元素時，它們不能基於網格語義匹配元素）。

flexbox存在類似問題：根據佈局方式，沒有用於匹配特定Flex項目的選擇器。一般來說，沒有選擇器根據它們的佈局來匹配元素，這由CSS控制。選擇器只匹配基於文檔語義（源順序等）的元素。

要設置所需元素的樣式，您需要使用一些其他方法（如客戶端腳本）或一些後端邏輯來標識它們（如果網格佈局已配置在後端內）。你如何做到這一點不在這個問題的範圍之內。

來源

2017-05-24 15:23:31 BoltClock

這就是我所害怕的。我想我們必須等待選擇器5或更高版本。 –

是否存在針對特定網格位置元素的選擇器？

回答

相關問題