在一个元素上使用两个 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11918491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using two CSS classes on one element
提问by Francesca
What am I doing wrong here?
我在这里做错了什么？
I have a .socialdiv, but on the first one I want zero padding on the top, and on the second one I want no bottom border.
我有一个.socialdiv，但在第一个上我想要顶部的零填充，而在第二个上我想要没有底部边框。
I have attempted to create classes for this first and last but I think I've got it wrong somewhere:
我试图首先和最后为此创建类，但我认为我在某处弄错了：
.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;}
And the HTML
和 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>
I'm guessing it's not possible to have two different classes? If so how can I do this?
我猜不可能有两个不同的类？如果是这样，我该怎么做？
回答by tybro0103
If you want two classes on one element, do it this way:
如果您想在一个元素上使用两个类，请这样做：
<div class="social first"></div>
Reference it in css like so:
像这样在 css 中引用它：
.social.first {}
Example:
例子：
回答by Codegiant
You can try this:
你可以试试这个：
HTML
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 CODE
代码
.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;
}
To add multiple class in the same element you can use the following format:
要在同一元素中添加多个类，您可以使用以下格式：
<div class="class1 class2 class3"></div>
回答by Pankaj Juneja
Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:
请记住，您可以通过在 class 属性中用空格分隔每个类来将多个类应用于元素。例如：
<img class="class1 class2">
回答by ?ime Vidas
If you only have two items, you can do this:
如果你只有两个项目，你可以这样做：
.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;
}
回答by Joseph Colbert
If you have 2 classes i.e. .indentand .font, class="indent font"works.
如果您有 2 个类，即.indent和.font，则class="indent font"有效。
You dont have to have a .indent.font{}in css.
你不必.indent.font{}在 css 中有一个。
You can have the classes separate in css and still call both just using the class="class1 class2"in the html. You just need a space between one or more class names.
您可以将 css 中的类分开，并且仍然只使用class="class1 class2"html 中的来调用它们。您只需要一个或多个类名之间有一个空格。
回答by Oriol
If you want to apply styles only to an element which is its parents' first child, is it better to use :first-childpseudo-class
如果您只想将样式应用于其父母的第一个孩子的元素，最好使用: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;
}
Then, the rule .socialhas both common styles and the last element's styles.
然后，该规则.social具有通用样式和最后一个元素的样式。
And .social:first-childoverrides them with first element's styles.
并.social:first-child用第一个元素的样式覆盖它们。
You could also use :last-childselector, but :first-childis more supported by old browsers: see
https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibilityand https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility.
您也可以使用: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。
回答by Daratrix
I know this post is getting outdated, but here's what they asked. In your style sheet:
我知道这篇文章已经过时了，但这是他们问的。在您的样式表中：
.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;
}
But it may be a bad way to use selectors. Also, if you need multiple "first" extension, you'll have to be sure to set different name, or to refine your selector.
但这可能是使用选择器的一种糟糕方式。此外，如果您需要多个“第一个”扩展名，您必须确保设置不同的名称，或者优化您的选择器。
[class="social first"] {...}
I hope this will help someone, it can be pretty handy in some situation.
我希望这会对某人有所帮助，在某些情况下它会非常方便。
For exemple, if you have a tiny piece of css that has to be linked to many different components, and you don't want to write a hundred time the same code.
例如，如果您有一小段 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;}
Becomes:
变成：
div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}
[class~=red] {color:red;}
回答by Razan Paul
Another option is to use Descendant selectors
另一种选择是使用后代选择器
HTML:
HTML：
<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>
Reference first one in CSS: .social .first { color: blue; }
引用 CSS 中的第一个： .social .first { color: blue; }
Reference last one in CSS: .social .last { color: green; }
参考 CSS 中的最后一个： .social .last { color: green; }
Jsfiddle: https://jsfiddle.net/covbtpaq/153/
jsfiddle：https://jsfiddle.net/covbtpaq/153/
回答by JuicY_Burrito
Instead of using multiple CSS classes, to address your underlying problem you can use the :focuspseudo-selector:
您可以使用:focus伪选择器来解决您的潜在问题，而不是使用多个 CSS 类：
input[type="text"] {
border: 1px solid grey;
width: 40%;
height: 30px;
border-radius: 0;
}
input[type="text"]:focus {
border: 1px solid #5acdff;
}
