在一个元素上使用两个 CSS 类 [英] Using two CSS classes on one element

问题描述

我在这里做错了什么?

我有一个 .social div，但在第一个我想要顶部零填充，而在第二个我想要没有底部边框.

我试图首先和最后为此创建类，但我认为我在某处弄错了:

.social {宽度:330px；高度:75px；浮动:对；文本对齐:左；填充:10px 0;边框底部:虚线 1px #6d6d6d;}.social .first{padding-top:0;}.social .last{border:0;}

和 HTML

<div class="socialIcon"><img src="images/facebook.png" alt="Facebook"/></div><div class="socialText">在 Facebook 上找到我</div>

我猜不可能有两个不同的类?如果是这样，我该怎么做?

解决方案

如果你想在一个元素上使用两个类，请这样做:

<div class="social first"></div>

像这样在 css 中引用它:

.social.first {}

示例:

https://jsfiddle.net/tybro0103/covbtpaq/

What am I doing wrong here?

I have a .social div, but on the first one I want zero padding on the top, and on the second one I want no bottom border.

I have attempted to create classes for this first and last but I think I've got it wrong somewhere:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}

.social .first{padding-top:0;}

.social .last{border:0;}

And the HTML

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

I'm guessing it's not possible to have two different classes? If so how can I do this?

解决方案

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

这篇关于在一个元素上使用两个 CSS 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！