多个 html div 使用相同的 css 样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9562155/
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 03:10:50  来源:igfitidea点击:

Multiple html div's using same css style

css

提问by user1184100

I have 2 div elements #container1 , #container2. Can i use styling in below manner ?

我有 2 个 div 元素 #container1 ,#container2。我可以按以下方式使用样式吗?

#container1,#container2 h5{ 
}

If yes then i cudn't get it to work for #container3

如果是,那么我无法让它为 #container3 工作

#container1,#container2,#container3 h5{ 
}

rule somehow doesn't seem to apply for #container3 .. What could be the reason ?

规则不知何故似乎不适用于#container3 .. 可能是什么原因?

回答by rjz

That selector will apply to #container1,#container2, and any h5s in #container3. I think you want:

该选择器将应用于#container1、#container2 和#container3 中的任何h5。我想你想要:

#container1 h5, 
#container2 h5, 
#container3 h5 {
  /* styling */
}

This is exactly what classes are intended for, however. If you add class="container"to each of your container divs, you can simply use the following rule:

然而,这正是类的目的。如果添加class="container"到每个 container 中div,则可以简单地使用以下规则:

.container h5 {
  /* styling */
}

回答by francisco.preller

The h5 at the end means that particular rule only applies to h5 elements inside the id.

最后的 h5 表示特定规则仅适用于 id 内的 h5 元素。

As an exmaple, from your first example...

例如,从你的第一个例子......

#container1,#container2 h5{ 
}

The above rules would apply to an element with id=contrainer1 and also to an h5 element inside an element with id=container2.

上述规则适用于具有 id=contrainer1 的元素,也适用于具有 id=container2 的元素内的 h5 元素。

With:

和:

#container1,#container2,#container3 h5{ 
}

You are actually targetting id=container1, id=container2 and also the h5 element inside an element with id=container3

您实际上是针对 id=container1、id=container2 以及 id=container3 元素内的 h5 元素

In both cases though, the element with the h5 tag does not target the element itself, only the heading tag inside it.

但在这两种情况下,带有 h5 标签的元素都不是针对元素本身,而是针对其中的标题标签。

回答by Saeed-rz

your code seems to correct but you can use another solution... why you doesnt use calss for every div you want?

您的代码似乎是正确的,但您可以使用另一种解决方案...为什么您不为您想要的每个 div 使用 calss?

.divcontainer{
css....
}