css - 告诉 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) 将颜色定义保留在一个地方，并且 (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;
}