Question

我正在尝试为多个ID设置一个css，但它无法正常工作

#c178, #c179, #c180 > .panel {
    margin-top: 20px;
    margin-bottom: 20px;
}
#c178, #c179, #c180 > .panel-default:last-child {
    border-top:thin solid #b11f26;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    /*Gradient on box */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#c178, #c179, #c180 > .panel-default > .panel-body:last-child {
    background: url('../introduction/images/WNF/wineglass.png') no-repeat 95% 50%;
}

是否可以拥有多个ID以及如何操作，如果我有一个ID，然后是＆gt; .panel ..它的工作，然后是下一个ID的相同代码，但这将给我一个大代码，这就是为什么我想要一个样式到多个ID。

我需要使用三个不同的ID名称，但css代码对于这三个名称都是相同的。

Answer 1

尝试这种方式：

#c178 > .panel, 
#c179 > .panel, 
#c180 > .panel {
    margin-top: 20px;
    margin-bottom: 20px;
}

您必须指定面板位于每个div内。

Answer 2

您只需要更改

#c178, #c179, #c180 > .panel
#c178, #c179, #c180 > .panel-default:last-child
#c178, #c179, #c180 > .panel-default > .panel-body:last-child

到

#c178 > .panel , #c179 > .panel , #c180 > .panel
#c178 > .panel-default:last-chil, #c179 > .panel-default:last-chil, #c180 > .panel-default:last-child
#c178 > .panel-default > .panel-body:last-child, #c179 > .panel-default > .panel-body:last-child, #c180 > .panel-default > .panel-body:last-child

希望我帮助

Answer 3

这应该有效

#c178 > .panel, #c179 > .panel, #c180 > .panel {
    margin-top: 20px;
    margin-bottom: 20px;
}
#c178 .panel-default:last-child, #c179 .panel-default:last-child, #c180 > .panel-default:last-child {
    border-top:thin solid #b11f26;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    /*Gradient on box */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#c178> .panel-default > .panel-body:last-child, #c179> .panel-default > .panel-body:last-child, #c180 > .panel-default > .panel-body:last-child {
    background: url('../introduction/images/WNF/wineglass.png') no-repeat 95% 50%;
}

我也会考虑为所有这些div使用相同的类并将样式应用于该类

Answer 4

为您的不同ID添加公共类，例如

<div id="c178" class="example"></div>
<div id="c179" class="example"></div>
<div id="c180" class="example"></div>

这样您可以使用类example设置不同ID的样式

一个css上有多个ID＃

4 个答案: