使用 CSS 时，您可能会遇到需要将多个类应用于 HTML 元素以实现特定样式效果的情况。但是，使用 HTML 分配多个类可能会令人困惑，从而导致错误的结果。
在您的例子中，您的目标是删除第一个社交图标的顶部填充，并消除最后一个社交图标的底部边框。问题源于您的 HTML 标记，您尝试将两个单独的类直接添加到同一个社交 div。
正确的 HTML 标记：
正确使用多个类，您应该将它们列在同一类属性中，如下所示：
<div class="social first"></div>
对应CSS：
.social.first {
padding-top: 0;
}通过使用此语法，.social 和 .first 类都将应用于 HTML 中的 div 元素，允许您同时满足这两种样式要求。
示例演示：
/* Base styling for both social icons */
.social {
width: 330px;
height: 75px;
float: right;
text-align: left;
padding: 10px 0;
border-bottom: dotted 1px #6d6d6d;
}
/* Styling for the first social icon */
.social.first {
padding-top: 0;
}
/* Styling for the last social icon */
.social.last {
border: none;
}此代码将成功应用零填充第一个社交图标的顶部，并删除最后一个社交图标的底部边框，满足所需的样式要求。
以上是如何使用 CSS 在单个 HTML 元素上设置多个类的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！
