在flexbox单元上悬停的css flexbox网格（嵌套）有效，无效

Question

The :hover behaviour in this example is making me doubt my sanity as everything in the code seems ok and works as expected, except the hovering of the white cells in the large matrix.

The generic structure has 2 flexbox div rows where:

• row one has 2 small flexbox div 3by3 matrixes (2 puzzles each with 9 cells)
• row two has 1 large flexbox div 3by3 matrix of nine flexbox ul 3by3 matrixes (9 puzzles each with 9 cells )
• all tags ( div , ul and li ) are flexbox containers
• even/odd cells have different colors (white and grey)

The layouts have been copied from real Sudoku puzzles for this question (sorry, i don't have the solutions).

To reproduce the problem

• Hover the small puzzles and the grey puzzles of the large matrix. On hover, each cell gets colored CornflowerBlue.
• Hover the white cells of the large matrix and only the full puzzle gets colored CornflowerBlue instead of each of the 9 cells individually.

The Question

Please tell me, have I stumbled over some CSS bug (probably not) or is the solution (which?) staring me in the face and do I just not see my mistake?

The Code (A bit long, but fully commented and with a few nifty responsiveness tricks...)

 /*****************************/ /* 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> 

Answer 1

Change the hover rule/selector to

[fbl-cell]>li:hover,.sudoku > ul li:hover {
    background: CornflowerBlue;
    cursor: pointer;
}

 /*****************************/ /* 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]>li:hover,.sudoku > ul 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>