1

私はこのCSSを持っていますが、ご覧のとおり、さまざまなカテゴリで同じことを繰り返しています...どうすればこのコードを減らすことができますか?

.dropdown .cars-category{
   float: left;
   margin-left: 1%;

}


.dropdown .trucks-category{
    float: right;
    margin-right: 1%;
}


.dropdown .trucks-category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .trucks-category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .trucks-category > li > a:hover,
.dropdown .trucks-category > li > a:focus,

.dropdown .trucks-category > .active > a,
.dropdown .trucks-category > .active > a:hover,
.dropdown .trucks-category > .active > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}


.dropdown .cars-category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .cars-category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .cars-category > li > a:hover,
.dropdown .cars-category > li > a:focus,

.dropdown .cars-category > .active > a,
.dropdown .cars-category > .active > a:hover,
.dropdown .cars-category > .active > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}
4

4 に答える 4

4

オプション 1 - HTML を変更してから削減する

ハイフンでつながれたクラスの代わりに 2 つのクラスを使用すると、最も削減されます。したがってclass="trucks-category"、html の代わりに、 class="trucks category" andclass="cars category" を使用してください。また、最後のブロックの一部は不要です (が要素.active上にあると仮定しliます)。セレクターを 7 つに減らします。

.dropdown .cars.category { /*could eliminate .category if no other .cars under */ 
   float: left;            /*the .dropdown menu, see .trucks for example */
   margin-left: 1%;
}


.dropdown .trucks { /*removed category if not needed to differentiate */
    float: right;
    margin-right: 1%;
}


.dropdown .category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown .category > li.last > a {
    border-bottom-width: 0;
}

.dropdown .category > .active > a,
.dropdown .category > li > a:hover, 
.dropdown .category > li > a:focus
/* .dropdown .category > .active > a:hover, UNNEEDED */
/* .dropdown .category > .active > a:focus UNNEEDED */ {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}

オプション 2 - クラス名で同じ値をターゲットにする

オプション 1 と同様ですが、ハイフンでつないだクラスを維持します。これは、 css が異なり、下にある他の-categoryクラスがない場合にのみ役立ちます。そうでない場合、これは機能します:.dropdown

.dropdown .cars-category { 
   float: left;            
   margin-left: 1%;
}


.dropdown .trucks-category {
    float: right;
    margin-right: 1%;
}


.dropdown [class*="-category"] > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

.dropdown [class*="-category"] > li.last > a {
    border-bottom-width: 0;
}

.dropdown [class*="-category"] > .active > a,
.dropdown [class*="-category"] > li > a:hover, 
.dropdown [class*="-category"] > li > a:focus {
    color: #546aa4;
    text-decoration: none;
    background-color: #e7eded;
    outline: 0;
}

別のクラス名を使用する方がより直感的で柔軟であると感じたという理由だけで、オプション 1 を 1 にしました。

于 2013-09-24T19:38:43.837 に答える
2

カテゴリをセレクターに追加するだけです。

.dropdown .trucks-category > li > a,
.dropdown .cars-category > li > a {
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}

CSS3 属性セレクターを使用して、クラスに -category with [class*="-category"] が含まれているかどうかに基づいて選択することもできます。

.dropdown [class*="-category"] > li > a{
    display: block;
    clear: both;
    line-height: 20px;
    color: #546aa4;
}
于 2013-09-24T19:01:02.673 に答える
2

少なくともこれらを組み合わせることができます

.dropdown .trucks-category > li > a {...} 

.dropdown .cars-category > li > a {...}

基本的にそれらとホバー/フォーカス...そして.最後に、車とトラックのカテゴリは私には同じに見えるので、それらをまとめることができます

.dropdown .trucks-category > li > a,
.dropdown .cars-category > li > a, {...}

私が何を意味するか知っていることを願っています

于 2013-09-24T19:00:19.090 に答える