Question

我有这个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;
}

Answer 1

选项1 - 更改HTML然后缩小

使用两个类而不是带连字符的类将最大限度地减少它。因此，在html中使用class="trucks-category" class =“cars category”而不是class="trucks category" and。此外，您的最后一些块是不必要的（假设.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只是因为我觉得单独的类名更直观，更灵活。

Answer 2

您至少可以将这些结合起来

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

和

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

基本上是那些和悬停/焦点......和.last，汽车和卡车类别看起来和我一样，所以你可以将它们捆绑起来

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

希望你知道我的意思

Answer 3

我只是将类别添加到选择器。

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

你也可以使用CSS3属性选择器来选择，如果这个类包含带有[class * =“ - category”]的-category，它几乎可以在任何地方使用，但可能在IE7上有问题 - 。

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

Answer 4

这里有一些你可以做的分组

CSS

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

.dropdown .trucks-category > .active > a,
.dropdown .trucks-category > .active > a:hover,
.dropdown .trucks-category > .active > a:focus,
.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;
}

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

我怎样才能减少这种重复

4 个答案:

选项1 - 更改HTML然后缩小

选项2 - 在类名上定位相同的值