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

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

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

<img class="class1 class2">

你可以试试这个:

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

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

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

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

我知道这篇文章已经过时了，但这是他们问的问题。 在你的样式表中:

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

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

HTML:

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

参考CSS中的第一个:.social .first{颜色:蓝色;｝

在CSS中引用最后一个:.social .last{颜色:绿色;｝

Jsfiddle: https://jsfiddle.net/covbtpaq/153/