Question

有没有办法简化以下内容？如果是这样我该怎么办？

.ui-layout-north {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0px;
}
.ui-layout-west {
    border-top: none;
    border-left: none;
    border-bottom: none;
    padding: 0px;
}
#inner {
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 0px;
}
#inner-center {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0px;
}
#inner-south {
    border-right: none;
    border-left: none;
    border-bottom: none;
    padding: 0px;
}

您可以在此处看到它：http://jsfiddle.net/xUvJk/2/

Answer 1

您可以使用逗号分隔每个标识符，以将相同的样式应用于多个元素：

#inner, #inner-center, #inner-south ... {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0px;
}

然后只为具有不同样式的每个元素指定：

#inner { 
    border-left : inherit;
}

Answer 2

分解然后指定。仅使用类：

.ui-layout-center, .ui-layout-south, .ui-layout-north, .ui-layout-west {
    border-style: none;
    padding: 0px;
}

.ui-layout-north {
    border-bottom-style:solid;
}

.ui-layout-west {
    border-right-style: solid;
}

.ui-layout-center {
    border-bottom-style: solid;
}

.ui-layout-south {
    border-top-style: solid;
}

http://jsfiddle.net/hQ5mY/1/

Answer 3

.ui-layout-north,
.ui-layout-west,
#inner,
#inner-center,
#inner-south {
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0px;    
}

.ui-layout-north {
    /* specify unique styles */
}

.ui-layout-west {
    /* specify unique styles */
}

#inner {
    /* specify unique styles */
}

#inner-center {
    /* specify unique styles */
}

#inner-south {
    /* specify unique styles */
}

Answer 4

.ui-layout-north, .ui-layout-west, #inner, #inner-center {
    border-top: none;
    padding: 0px;
}

.ui-layout-north, .ui-layout-west , #inner-center, #inner-south{
   border-left: none;
   padding: 0px;
}

.ui-layout-west, #inner, #inner-south {
    border-bottom: none;
}

.ui-layout-north, #inner, #inner-south {
  border-right: none;
}

有没有办法简化这个CSS？

4 个答案: