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

Question

我在这做错了什么？

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

请记住,您可以通过将每个类与其class属性中的空格分隔,将多个类应用于元素.例如:

<img class="class1 class2">

Answer 5

如果你有2类,即.indent和.font,class="indent font"工作.

你不必拥有一个.indent.font{}css.

您可以在css中将这些类分开,并且仍然只使用class="class1 class2"html中的两个调用.您只需要一个或多个类名之间的空格.

Answer 6

如果您只想将样式应用于父元素的第一个子元素,那么使用: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 7

我知道这篇文章已经过时了,但这就是他们的要求.在你的样式表中:

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

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

HTML：

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

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

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

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