在一个元素上使用两个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>

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

976918 次浏览
小开
最佳答案

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

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

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

.social.first {}

例子:

https://jsfiddle.net/tybro0103/covbtpaq/ < a href = " https://jsfiddle.net/tybro0103/covbtpaq/ " > < / >

小开

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

.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-child选择器，但是旧的浏览器更支持__abc1:参见 https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility和https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility.

小开

你可以试试这个:

< em > < / HTML em >

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

< em > < / em > 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-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 { color: blue; }

引用CSS中的最后一个:.social .last { color: green; }

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

小开

为了解决你的潜在问题，你可以使用: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">
小开

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

你不必在css中有.indent.font{}。

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


提交答案