1

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

.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/

4

4 回答 4

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/

于 2013-07-28T18:14:25.953 回答
2

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

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

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

#inner { 
    border-left : inherit;
}
于 2013-07-28T17:56:59.277 回答
1
.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 */
}
于 2013-07-28T17:58:15.173 回答
0
.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;
}
于 2013-07-28T17:57:36.513 回答