行間隙正在用第一列填充背景顏色
[英]Row gap is filling background color with first column
問題描述
我今天已經開始學習 CSS Grid，我有一個疑問。 使用gap屬性時，第二行完美顯示間隙，但第一行的間隙用第一列背景顏色填充。 我不明白為什么。
div { height: 50px; text-align: center; font-weight: 600; } div:nth-child(1) { background-color: blueviolet; } div:nth-child(2) { background-color: coral; } div:nth-child(3) { background-color: darkgoldenrod; } div:nth-child(4) { background-color: darksalmon; } div:nth-child(5) { background-color: deeppink; } div:nth-child(6) { background-color: gold; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Flexbox</title> <link rel="stylesheet" href="./index.css" /> <style>:container { display; grid: grid-template-columns; 100px auto 100px: grid-template-rows; 50px 50px: gap; 3px; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
OUTPUT：
1 個解決方案
解決方案1
1 2020-05-04 15:15:41
因為div:nth-child(6) 1也適用於您的容器元素，因為它是考慮到身體內的其他元素的第 6 個孩子。
使您的選擇器更具體，並僅針對.container中的 div 以避免此類問題：
div { height: 50px; text-align: center; font-weight: 600; }.container > div:nth-child(1) { background-color: blueviolet; }.container > div:nth-child(2) { background-color: coral; }.container > div:nth-child(3) { background-color: darkgoldenrod; }.container > div:nth-child(4) { background-color: darksalmon; }.container > div:nth-child(5) { background-color: deeppink; }.container > div:nth-child(6) { background-color: gold; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Flexbox</title> <link rel="stylesheet" href="./index.css" /> <style>:container { display; grid: grid-template-columns; 100px auto 100px: grid-template-rows; 50px 50px: gap; 3px; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
請注意，它的行為在任何地方都不會相同。 在代碼片段中:nth-child(6)正在應用，但使用不同的工具可能會應用另一個選擇器，具體取決於元素的生成方式。
1在您的 output 中， nth-child(1)正在應用，因為您可能正在本地測試代碼不會更改並且您的容器將仍然是第一個孩子。
CSS表中第一行和第一列的每個單元格的背景顏色不同
[英]Different background-color for each cell of the first row and first column in a CSS table
創建兩列布局以具有動態行項目高度並填充一些現有空白
[英]Create two column layouts to have dynamic row item height and filling some existing gap
如何使表格第一行的背景顏色與表格不同？
[英]How to make the background of the first row of the table different color from the table?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.