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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:14:54  来源:igfitidea点击:

How to reference a div with class="name1 name2"?

csscss-selectors

提问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 divactually has two classes, relatedand products. You can reference it in your stylesheet with either .relatedor .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the divin your question would appear red with font size 12:

div实际上有两个班,relatedproducts。您可以在样式表中使用.related或引用它.products,它将从这两个规则中选取样式。例如,使用以下 CSS,div您问题中的文本将显示为红色,字体大小为 12:

.related { color:#ff0000 }
.products { font-size:12px }

If you want to select elements with both classes, use .related.productsin your stylesheet. For example, add the following to the above example:

如果要选择具有两个类的元素,请.related.products在样式表中使用。例如,将以下内容添加到上面的示例中:

.related.products { font-weight:bold }

And the text in your divwill receive all three rules, because it matches all 3 selectors. Here's a working example.

您的文本div将接收所有三个规则,因为它匹配所有 3 个选择器。这是一个工作示例

回答by Joseph Marikle

div.related.productsis the general method

div.related.products是通用方法

回答by Madara's Ghost

You reference it by div.related.productswhich literaly translates to "a divwith 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.

或者,您可以使用任一类名来引用它,因为它会同时捕获两个类名。

jsFiddle Example.

jsFiddle 示例

回答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。