Question

我有以下结构......

<a href="#" class="brand-logo">
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo"/>
</a>

我有以下css代码......

.brand-logo {
    height: 100%;
}
 .wpc-logo {
    height: 100%;
}

我的问题：我可以在一个css代码中设置样式吗？

Answer 1

如果您想要具有相同样式的单独类名，请在CSS选择器之间使用逗号,。

.brand-logo,
.wpc-logo {
  height: 100%;
}

或者您可以创建一个公共类来应用于这两个元素。

.common {
  height: 100%;
}

<a href="#" class="brand-logo common">
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo common"/>
</a>

Answer 2

这样做，使用逗号分隔，或者在您的情况下，使用属性选择器

.brand-logo, .wpc-logo {
    color: red;
}

[class$='-logo2'] {
    color: blue;
}

<a href="#" class="brand-logo">
  Red
    <span class="wpc-logo">Logo</span>
</a>

<hr>

<a href="#" class="brand-logo2">
  Blue
    <span class="wpc-logo2">Logo</span>
</a>

在css中设置父元素和子元素的样式

2 个答案: