9

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

私の英語を台無しにしてしまったら申し訳ありません。

ありがとう！！！！

4

2 に答える 2

2

多くのレベルの更新された回答

これは、元の回答で以下のオプション 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) 色の定義を 1 か所に保持し、(2) カンマで 2 つをグループ化しますが、(3) 多くのセレクター コードを繰り返しますが、(4) 非常に読みやすいです。

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

オプション 2 (コードセレクター 1 回)

これにはオプション 1 の利点 (1) と (2) があり、変数 (LESS 1.3.1+ が必要) を使用した動的セレクター構築を利用してセレクター コードを 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;
}
于 2013-03-01T15:13:45.627 に答える
1

less で疑似クラス (:hover など) を使用するには、& 演算子を使用する必要があります。また、いくつかの疑似クラスの順序が混同されています。あなたがやろうとしていることを私が理解しているなら、それは次のようなものでなければなりません：

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

        &:hover {
          background: blue;
        }
      }

      +li {
        a {
          background: green;

          &:hover {
            background: yellow;
          }
        }
      }
    }
  }
}

うまくいけば、それが役に立ちます。うまくいかない場合は、出力として希望する CSS に加えて、LESS ファイルから生成された CSS を投稿してください。

于 2013-03-01T06:06:19.057 に答える