CSS重复选择器

Question

我选择了一个CSS的尖叫来构建一个包含所需字段的可视队列的表单。

CSS有几个相同的选择器，显然在删除效果表单时都很重要。 CSS合并这两个有些怎么样？感谢你提出新手问题。完整列表如下。

    .required-field-block .required-icon {
        display: inline-block;
        vertical-align: middle;
        margin: -0.25em 0.25em 0em;
        background-color: #E8E8E8;

    snip for brevity
    ....

    }

    .required-field-block .required-icon {
        background-color: transparent;
        position: absolute;
        top: 0em;
        right: 0em;
        z-index: 10;
        margin: 0em;

snip for brevity
....

}

---

完整列表

.required-field-block {
    position: relative;   
}

.required-field-block .required-icon {
    display: inline-block;
    vertical-align: middle;
    margin: -0.25em 0.25em 0em;
    background-color: #E8E8E8;
    border-color: #E8E8E8;
    padding: 0.5em 0.8em;
    color: rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
    font-weight: normal;
    border-radius: 0.325em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    transition: background 0.1s linear;
    font-size: 75%;
}

.required-field-block .required-icon {
    background-color: transparent;
    position: absolute;
    top: 0em;
    right: 0em;
    z-index: 10;
    margin: 0em;
    width: 30px;
    height: 30px;
    padding: 0em;
    text-align: center;
    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.required-field-block .required-icon:after {
    position: absolute;
    content: "";
    right: 1px;
    top: 1px;
    z-index: -1;
    width: 0em;
    height: 0em;
    border-top: 0em solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 0em solid transparent;
    border-right-color: inherit;
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.required-field-block .required-icon .text {
    color: #B80000;
    font-size: 26px;
    margin: -3px 0 0 12px;
}

Answer 1

将应用两种已定义的样式，但是如果属性重叠，则第二种指定的样式将优先。如果你使用Firebug，很容易看出会发生什么：

Answer 2

来自cascading order的CSS规范：

  

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

因此，如果同一样式表中的相同选择器存在冲突样式，则最后一个样式优先。因此，在您的情况下，您会获得margin: 0em和background-color: transparent。

Answer 3

您的第二个margin: 0em;会覆盖第一个margin: -0.25em 0.25em 0em;。