CSS 如何使用 class="name1 name2" 引用 div?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7026376/
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
How to reference a div with class="name1 name2"?
提问by Rob
I'm working on some CSS from a tutorial, a div has this class:
我正在研究教程中的一些 CSS,一个 div 有这个类:
<div class="related products">
How can I reference it in the stylesheet?
如何在样式表中引用它?
回答by James Allardice
The div
actually has two classes, related
and products
. You can reference it in your stylesheet with either .related
or .products
, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div
in your question would appear red with font size 12:
在div
实际上有两个班,related
和products
。您可以在样式表中使用.related
或引用它.products
,它将从这两个规则中选取样式。例如,使用以下 CSS,div
您问题中的文本将显示为红色,字体大小为 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products
in your stylesheet. For example, add the following to the above example:
如果要选择具有两个类的元素,请.related.products
在样式表中使用。例如,将以下内容添加到上面的示例中:
.related.products { font-weight:bold }
And the text in your div
will receive all three rules, because it matches all 3 selectors. Here's a working example.
您的文本div
将接收所有三个规则,因为它匹配所有 3 个选择器。这是一个工作示例。
回答by Joseph Marikle
div.related.products
is the general method
div.related.products
是通用方法
回答by Madara's Ghost
You reference it by div.related.products
which literaly translates to "a div
with class of related and class of products".
您引用它div.related.products
,字面意思是“div
相关类和产品类”。
Or, you could reference it by using eitherclass names, since it will catch both.
或者,您可以使用任一类名来引用它,因为它会同时捕获两个类名。
回答by Aaron Lee
In the css, just put the name class of the div by doing this:
在css中,只需通过这样做来放置div的名称类:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
现在相关产品类中的任何样式都将应用于该 div。