在一个元件上使用两个CSS类[复制](Using two CSS classes on one el

这个问题已经在这里有一个答案：

• 如何将两个CSS类应用于单个元素 7个回答

我在做什么错在这里？

我有一个.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>

我猜这是不可能有两个不同的类？ 如果是的话我怎么能这样做呢？

Answer 1:

如果你想在一个元件上两节课，做这种方式：

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

引用它在CSS像这样：

.social.first {}

例：

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

Answer 2:

你可以试试这个：

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

Answer 3:

如果你只有两个项目，你可以这样做：

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

Answer 4:

请记住，您可以通过每个类的类属性内的空间分隔应用多个类的元素。 例如：

<img class="class1 class2">

Answer 5:

如果你想要的风格只适用于这是其父母的第一个孩子的元素，是它更好地使用:first-child伪类

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

然后，规则.social有两种常见的样式和最后一个元素的样式。

和.social:first-child覆盖他们第一个元素的样式。

你也可以使用:last-child选择，但是:first-child更多的是由旧的浏览器支持：看https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility和HTTPS： //developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility 。

Answer 6:

我知道这个帖子是越来越过时，但在这里就是他们问。 在您的样式表：

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
    padding-top:0;
}
[class~="last"] {
    border:0;
}

但它可能是使用选择一个不错的方法。 另外，如果你需要多个“第一”的扩展，你必须一定要设置不同的名称，或优化您的选择。

[class="social first"] {...}

我希望这会帮助别人，它可以在某些情况下非常方便。

对于为例，如果你有一小片有链接到许多不同的组件的CSS，你不想写一百年的时间相同的代码。

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}

变为：

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}

Answer 7:

如果你有2类，即.indent和.font ， class="indent font"的作品。

你不必有一个.indent.font{}在CSS。

你可以有类在CSS分离，还自称只是两者使用class="class1 class2"中的HTML。 你只需要一个或多个类名之间的空间。

Answer 8:

另一种选择是使用后代选择

HTML：

<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>

参考CSS中的第一个： .social .first { color: blue; } .social .first { color: blue; }

参考最后一个CSS： .social .last { color: green; } .social .last { color: green; }

的jsfiddle： https://jsfiddle.net/covbtpaq/153/

Answer 9:

相反，使用多个CSS类，来解决你的根本问题，你可以使用:focus伪选择：

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

文章来源: Using two CSS classes on one element [duplicate]