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

Question

此示例中的：悬停行为让我怀疑我的理智，因为代码中的所有内容似乎都正常并按预期工作，除了的悬停大矩阵中的白色单元格。

通用结构包含 2个flexbox div行，其中：

• 第一行有2个小型flexbox div 3by3矩阵（2个拼图各有9个单元格）
• 第二行有1个大型flexbox div 3by3矩阵，包含9个flexbox ul 3by3矩阵（9个拼图各9个单元格）
• 所有代码（div，ul和li）都是flexbox容器
• 偶数/奇数单元格有不同的颜色（白色和灰色）

这个问题已经从真正的数独谜题中复制了布局（对不起，我没有解决方案）。

重现问题

• 将小拼图和大矩阵的灰色拼图悬停在一起。在悬停时，每个单元格都会被着色CornflowerBlue.
• 将大型矩阵的白色单元格悬停，仅完整拼图分别为CornflowerBlue 而不是9个单元格。

问题

请告诉我，我是否偶然发现了一些CSS错误（可能没有），或者是解决方案（哪个？）盯着我看，我不知道我的错误？

代码 （有点长，但完全评论，并有一些漂亮的响应技巧...）

＆＃13;

＆＃13;

/*****************************/
/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将hover规则/选择器更改为

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

＆＃13;

＆＃13;

/*****************************/
/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;