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

我在这里做错了什么?

我有一个.social div ,但是第一个我想在顶部填充零,第二个我不需要底部边框。

我试图为这个第一个和最后一个创build类,但我认为我错了某处:

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

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

如果你想要一个元素上的两个类,就这样做:

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

在CSS中引用它像这样:

 .social.first {} 

例:

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

你可以试试这个:

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

如果你只有两个项目,你可以这样做:

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

如果你只想把样式应用到父母的第一个孩子,那么使用: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-childselect器,但是:first-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 。

我知道这个post已经过时了,但是这里是他们所要求的。 在你的样式表中:

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

但是使用select器可能是一个不好的方法。 此外,如果您需要多个“第一”扩展名,则必须确保设置不同的名称,或者细化select器。

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

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

 <img class="class1 class2"> 

另一种select是使用后代select器

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/

你可以用不同的方式来expression,比如你可以把焦点放在焦点上或者其他任何东西上。

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

如果你有2个类,即.indent.fontclass="indent font"作品。

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

你可以让这些类在CSS中分开,并且只要在html中使用class="class1 class2" 。 你只需要一个或多个类名之间的空格。