告诉LESS CSS如何使用.active li

Question

我正在尝试制作一个有6个按钮的菜单,每个按钮都有自己的背景颜色和悬停背景颜色.现在,如果链接的父li具有.active类,我不希望在悬停时显示背景颜色.这就是我试图做的事情:

//I'm making li and li.active links to have the same normal and hover state bg color and then...
li, li.active{
    &:first-child{
        a, a:hover{
            background: @1-n;
        }
        + li{
            a, a:hover{
                background: @2-n;
            }
            + li{
                a, a:hover{
                    background: @3-n;
                }
                + li{
                    a, a:hover{
                        background: @4-n;
                    }
                    + li{
                        a, a:hover{
                            background: @5-n;
                        }
                        + li{
                            a, a:hover{
                                background: @6-n;
                            }
                        }
                    }
                }
            }
        }
    }
}
//..trying to overwrite the hovers only for normal li so I can't avoid applying them to li.active's ones
li{
    &:first-child{
        a:hover{
            background: @1-h;
        }
        + li{
            a:hover{
                background: @2-h;
            }
            + li{
                a:hover{
                    background: @3-h;
                }
                + li{
                    a:hover{
                        background: @4-h;
                    }
                    + li{
                        a:hover{
                            background: @5-h;
                        }
                        + li{
                            a:hover{
                                background: @6-h;
                            }
                        }
                    }
                }
            }
        }
    }
}

这是正在生成的CSS:

li:first-child a, li.active:first-child a, li:first-child a:hover, li.active:first-child a:hover {
    background: @1-n;
}
li:first-child + li a, li.active:first-child + li a, li:first-child + li a:hover, li.active:first-child + li a:hover {
    background: @2-n;
}
li:first-child + li + li a, li.active:first-child + li + li a, li:first-child + li + li a:hover, li.active:first-child + li + li a:hover {
    background: @3-n;
}
li:first-child + li + li + li a, li.active:first-child + li + li + li a, li:first-child + li + li + li a:hover, li.active:first-child + li + li + li a:hover {
    background: @4-n;
}
li:first-child + li + li + li + li a, li.active:first-child + li + li + li + li a, li:first-child + li + li + li + li a:hover, li.active:first-child + li + li + li + li a:hover {
    background: @5-n;
}
li:first-child + li + li + li + li + li a, li.active:first-child + li + li + li + li + li a, li:first-child + li + li + li + li + li a:hover, li.active:first-child + li + li + li + li + li a:hover {
    background: @6-n;
}
li:first-child a:hover {
    background: @1-h;
}
li:first-child + li a:hover {
    background: @2-h;
}
li:first-child + li + li a:hover {
    background: @3-h;
}
li:first-child + li + li + li a:hover {
    background: @4-h;
}
li:first-child + li + li + li + li a:hover {
    background: @5-h;
}
li:first-child + li + li + li + li + li a:hover {
    background: @6-h;
}

如果我搞砸了我的英语,我很抱歉,我希望自己清楚明白!

谢谢!!!!

Answer 1

更新了多个级别的答案

这在我的原始答案中使用了下面选项 2的变体，这意味着需要使用 LESS 1.3.1+ 版本。由于使用了变量，在这种情况下（在我看来）实际上最终更具可读性。我仅使用数字 ( 1) 和带有“h”的数字 ( 1h) 分别表示基本背景和所需的悬停状态背景。

较少的

ul {
    li {
        @first: ~':first-child';
        @withActive: ~'.active';
        @noHover: ~'a';
        @withHover: ~'a:hover';
        @level2: ~'+ li';
        @level3: ~'+ li + li'; 
        @level4: ~'+ li + li + li'; 
        @level5: ~'+ li + li + li + li';
        @level6: ~'+ li + li + li + li + li';    
        &@{first}, 
        &@{withActive}@{first} {
           @{noHover}, @{withHover} {
             background: 1;
           }
        }      
        &@{first} { 
            @{level2}, 
            @{level2}@{withActive} {
              @{noHover}, @{withHover} {
                background: 2;
              }
            }
            @{level3}, 
            @{level3}@{withActive} {
              @{noHover}, @{withHover} {
                background: 3;
              }
            }
            @{level4}, 
            @{level4}@{withActive} {
              @{noHover}, @{withHover} {
                background: 4;
              }
            }
            @{level5}, 
            @{level5}@{withActive} {
              @{noHover}, @{withHover} {
                 background: 5;
              }
            }
            @{level6}, 
            @{level6}@{withActive} {
              @{noHover}, @{withHover} {
                 background: 6;
              }
            }      
            @{withHover} { background: 1h;}
            @{level2} @{withHover} { background: 2h;}
            @{level3} @{withHover} { background: 3h;}
            @{level4} @{withHover} { background: 4h;}
            @{level5} @{withHover} { background: 5h;}
            @{level6} @{withHover} { background: 6h;}
        }
    }
}

CSS 输出

ul li:first-child a,
ul li.active:first-child a,
ul li:first-child a:hover, /* <-- Over written */
ul li.active:first-child a:hover {
  background: 1;
}
ul li:first-child + li a,
ul li:first-child + li.active a,
ul li:first-child + li a:hover, /* <-- Over written */
ul li:first-child + li.active a:hover {
  background: 2;
}
ul li:first-child + li + li a,
ul li:first-child + li + li.active a,
ul li:first-child + li + li a:hover, /* <-- Over written */
ul li:first-child + li + li.active a:hover {
  background: 3;
}
ul li:first-child + li + li + li a,
ul li:first-child + li + li + li.active a,
ul li:first-child + li + li + li a:hover, /* <-- Over written */
ul li:first-child + li + li + li.active a:hover {
  background: 4;
}
ul li:first-child + li + li + li + li a,
ul li:first-child + li + li + li + li.active a,
ul li:first-child + li + li + li + li a:hover, /* <-- Over written */
ul li:first-child + li + li + li + li.active a:hover {
  background: 5;
}
ul li:first-child + li + li + li + li + li a,
ul li:first-child + li + li + li + li + li.active a,
ul li:first-child + li + li + li + li + li a:hover, /* <-- Over written */
ul li:first-child + li + li + li + li + li.active a:hover {
  background: 6;
}

/* These over write the third lines of the above output due to the css cascade */
ul li:first-child a:hover {
  background: 1h;
}
ul li:first-child + li a:hover {
  background: 2h;
}
ul li:first-child + li + li a:hover {
  background: 3h;
}
ul li:first-child + li + li + li a:hover {
  background: 4h;
}
ul li:first-child + li + li + li + li a:hover {
  background: 5h;
}
ul li:first-child + li + li + li + li + li a:hover {
  background: 6h;
}

提及所有级别之前的原始答案

我已将下面的代码删减为您所涉及的问题。这可以适应代码+ li。

选项 1（非常易读）

(1) 将颜色定义保留在一处，(2) 通过逗号将两者分组，但是 (3) 它重复了很多选择器代码，尽管 (4) 它非常可读：

ul{
    li{
        &:first-child a, 
        &.active:first-child a:hover {
          background: red;         
        }
        &:first-child a:hover {
          background: blue;
        }
    }
}

选项2（代码选择器一次）

这具有选项 1 的优点 (1) 和 (2)，并通过利用带有变量的动态选择器构建（需要 LESS 1.3.1+）来克服问题 (3)，使选择器代码仅输入一次，但是，它可能是将产生什么不太明显，因此失去了选项 1 的优势 (4)。

ul {
    li {
        @noActive: ~':first-child a';
        @withActive: ~'.active@{noActive}';
        &@{noActive}, 
        &@{withActive}:hover {
             background: red;
        }
        &@{noActive}{ 
           &:hover { background: blue;}
        }
   }
}

两者的 CSS 输出

ul li:first-child a,
ul li.active:first-child a:hover {
  background: red;
}
ul li:first-child a:hover {
  background: blue;
}