这个问题在这里已经有了答案:How to apply two CSS classes to a single element (7 answers) 3年前关闭。
我在这里做错了什么?
我有一个 .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>
我猜不可能有两个不同的课程?如果是这样,我该怎么做?
<p class = "a" class = "b"></p>
将应用两个规则还是只应用 b 或...做。只是想弄清楚如何处理。看起来有点不高兴。
如果你想在一个元素上有两个类,这样做:
<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>
请记住,您可以通过在其类属性中用空格分隔每个类来将多个类应用于一个元素。例如:
<img class="class1 class2">
如果您有 2 个类,即 .indent
和 .font
,则 class="indent font"
有效。
您不必在 css 中有 .indent.font{}
。
您可以在 css 中将这些类分开,并且仍然只使用 html 中的 class="class1 class2"
来调用它们。您只需要在一个或多个类名之间留一个空格。
如果你只有两个项目,你可以这样做:
.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
选择器,但旧浏览器更支持 :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。
我知道这篇文章已经过时了,但这就是他们的要求。在您的样式表中:
.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;}
另一种选择是使用 Descendant selectors
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;
}
不定期副业成功案例分享
<div class="first"></div>
会发生什么?