0
的：懸停在這個例子中行爲讓我懷疑我的理智因爲一切都在代碼似乎確定和正常工作，除徘徊的白色細胞在大矩陣中。CSS Flexbox的格不和不工作
通用結構具有2 Flexbox的div行，其中：
- 行之一具有2點個小Flexbox的
div3by3矩陣（每個具有9個細胞2個拼圖） - 兩個行具有1個大Flexbox的
div3by3九個Flexbox的ul3by3矩陣矩陣（每個具有9個細胞9個拼圖） - 所有標籤（
div，ul和li）是Flexbox的ç ontainers - 奇/偶細胞有不同的顏色（白色和灰色）
的佈局已經從真正的數獨謎題了這個問題（對不起，我沒有解決方案）複製。
要重現該問題
- 懸停小難題和大矩陣的灰度難題。懸停，每個單元被彩色
CornflowerBlue. - 哈弗的大型矩陣的白細胞和只有充分拼圖得到有色
CornflowerBlue，而不是每個9個細胞單獨的。
問題
請告訴我，有我絆了一些CSS錯誤（可能不是）或者是解決方案（它？）盯着我的臉，我只是沒有看到我的錯？
守則 （有點長，但完全註釋，並用幾個漂亮的響應技巧...）
/*****************************/
/* MINIMAL REQUIRED [STABLE] */
/*****************************/
/* [MANDATORY] for '.fbl-cell' to work */
html,body { box-sizing: border-box }
::before,:after, * { box-sizing: inherit }
/* remove default markup */
ul { margin: 0; padding: 0 }
li { list-style-type: none }
/**************************************/
/* easy RESPONSIVE|FONT|NESS [STABLE] */
/**************************************/
/* Math: y=mx+b for points p1(320,14) p2(1280,20) => 14>20 */
html { font-size: calc(0.00625 * 100vmin + 12px) } /* device dependend (not W/H), so use VMIN */
[lang="ar"] { font-size: calc(0.00625 * 100vmin + 15px) } /* 17>23 (Arabic looks a bit small at 14>20) */
body { font-size: 1rem; line-height: 1.5; margin: 0 } /* HTML default 16px/1.3/10px (or so) */
/***************************************/
/* GRID RESTRAINTS and MARKUP [STABLE] */
/***************************************/
/* main container */
.sudoku-row {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: .5rem;
max-width: 100vmin;
margin: 3rem auto;
}
/* cell container (default size) */
.sudoku-row>.sudoku {
height: 10rem;
width : 10rem;
margin: .5rem;
font-size: calc(0.00625 * 100vmin + 18px); /* responsive: (320,20)(1280,26) */
}
.sudoku.fullsize { /* large size override */
height: 75vmin;
width : 75vmin;
margin: 0 auto;
font-size: calc(0.025 * 100vmin + 6px); /* responsive: (320,14)(1280,38) */
}
/* hover */
.sudoku,.sudoku.fullsize>* {
border: 1px solid black;
}
[fbl-cell]>:hover,.sudoku li:hover {
background: CornflowerBlue;
cursor: pointer;
}
/* coloring/styling */
body {
background-color: #f0f0f0;
}
.sudoku-row>.sudoku {
background: #fff;
}
.sudoku>:nth-child(even) {
background-color: #eee;
}
.sudoku li {
border: 1px solid hsla(0,0%,0%,.15);
}
/*********************************************/
/* FLEXBOX and PATCH GRID STRUCTURE [STABLE] */
/*********************************************/
/* Both parent end child are flexbox containers */
[fbl-cell],[fbl-cell]>* {
display: flex;
flex-wrap: wrap;
}
[fbl-cell] {
align-content: flex-start;
}
[fbl-cell]>* { /* cell immediate child elements */
flex: 1; /* allow grow (and shrink, which is HTML default as is 'flex-basis: auto') */
overflow: hidden; /* [MANDATORY] */
/* [DEMO] center content hor/vert inside cell */
justify-content: center; align-items: center;
}
[fbl-cell="3x3"]>* { /* 3by3 matrix equally divided over parent space */
flex-basis: 33.33333%; max-width : 33.33333%; /* 'width' won't work */
height : 33.33333%; max-height: 33.33333%;
}<div class="sudoku-row">
<ul fbl-cell="3x3" class="sudoku"><li> <li>9<li> <li>4<li><li>1<li> <li> <li>3</ul>
<ul fbl-cell="3x3" class="sudoku"><li>2<li> <li>5<li> <li><li> <li> <li> <li> </ul>
</div>
<div class="sudoku-row">
<div fbl-cell="3x3" class="sudoku fullsize">
<ul fbl-cell="3x3"><li> <li>9<li> <li>4<li><li>1<li> <li> <li>3</ul>
<ul fbl-cell="3x3"><li>2<li> <li>5<li> <li><li> <li> <li> <li> </ul>
<ul fbl-cell="3x3"><li> <li>1<li> <li>3<li><li>9<li>6<li> <li> </ul>
<ul fbl-cell="3x3"><li> <li> <li>3<li> <li><li> <li>9<li> <li> </ul>
<ul fbl-cell="3x3"><li>4<li> <li>8<li> <li><li> <li>6<li> <li>1</ul>
<ul fbl-cell="3x3"><li> <li> <li>5<li> <li><li> <li> <li> <li>7</ul>
<ul fbl-cell="3x3"><li> <li> <li>9<li>6<li><li>7<li> <li>3<li> </ul>
<ul fbl-cell="3x3"><li> <li> <li> <li> <li><li> <li>7<li> <li>9</ul>
<ul fbl-cell="3x3"><li>1<li> <li> <li>4<li><li>2<li> <li>8<li> </ul>
</div>
</div>
啊，我知道它必須是明顯的東西。現在重新看一下'.sudoku>：nth-child（odd）{background-color：#fff}'也會有效，但更加混淆了'監督/錯誤'。謝謝！ –
實際上，將懸停規則更改爲'[fbl-cell]>：hover {cursor：pointer;背景：hsla（219,79％，66％,.5）;/* CornflowerBlue * /} '本來會顯示我正在懸停父母（白色）和孩子（透明），但沒有看到懸停顏色。 –