326

我在这里做错了什么？

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

我猜不可能有两个不同的课程？如果是这样，我该怎么做？

4

9 回答 9

583

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

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

像这样在css中引用它：

.social.first {}

例子：

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

于 2012-08-11T23:31:24.893 回答
34

你可以试试这个：

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>

演示

于 2012-08-12T08:41:42.180 回答
23

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

<img class="class1 class2">
于 2017-05-17T18:22:26.623 回答
15

如果您有 2 个类，即.indent和.font，则class="indent font"有效。

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

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

于 2017-11-06T17:15:02.283 回答
10

如果你只有两个项目，你可以这样做：

.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;
}
于 2012-08-11T23:40:56.720 回答
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。

于 2012-08-11T23:41:08.073 回答
6

我知道这篇文章已经过时了，但这就是他们的要求。在您的样式表中：

.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;}
于 2015-10-28T19:35:19.500 回答
5

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

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/

于 2016-03-23T06:23:21.390 回答
1

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

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid #5acdff;
}
于 2016-10-04T01:00:25.017 回答