我哪里做错了?

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

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


当前回答

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

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

其他回答

如果你想只对父元素的第一个子元素应用样式,那么最好使用: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用first element的样式重写它们。

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

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

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

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

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

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

.social.first {}

例子:

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

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

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

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

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

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