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，然后减少

使用两个类而不是连字符类将最大程度地减少它。因此，不要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和 under-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 {...}

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

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

希望你明白我的意思

于 2013-09-24T19:00:19.090 回答
2

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

.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;
}
于 2013-09-24T19:01:02.673 回答
2

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

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;
}
于 2013-09-24T19:05:46.967 回答