在一个元素上使用两个CSS类

我哪里做错了?

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

我尝试创建类的第一个和最后一个，但我认为我在某个地方错了:

.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;}

还有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>

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

当前回答

为了解决潜在的问题，你可以使用:focus伪选择器，而不是使用多个CSS类:

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid #5acdff;
}

2016-10-04 01:00:25

其他回答

请记住，通过在class属性中用空格分隔每个类，可以将多个类应用到一个元素。例如:

<img class="class1 class2">

2017-05-17 18:22:26

如果你只有两项，你可以这样做:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border: none;
}

.social:first-child { 
    padding-top:0;
    border-bottom: dotted 1px #6d6d6d;
}

2012-08-11 23:40:56

如果你有两个类，即.indent和.font, class="indent font"工作。

你不需要有一个。缩进。css中的字体{}。

你可以在css中把这两个类分开，在html中使用class="class1 class2"来调用它们。只需要在一个或多个类名之间有一个空格。

2017-11-06 17:15:02

你可以试试这个:

HTML

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

CSS代码

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

要在同一个元素中添加多个类，可以使用以下格式:

<div class="class1 class2 class3"></div>

DEMO

2012-08-12 08:41:42

如果你想在一个元素上有两个类，可以这样做:

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

在css中引用它，如下所示:

.social.first {}

例子:

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

2012-08-11 23:31:24

在一个元素上使用两个CSS类

推荐文章

最新文章

标签