Css 我可以为不同的ID设置不同的类名样式吗？

我认为（？）我可以继续重用同一组类名，但通过以这种方式为不同的故事编写一个样式表，让它们对不同的ID执行不同的样式：

.bg #story1 {background-color:#ccffff;}
.bg #story2 {background-color:#ffffff;}
.marginL #story1 {margin-left:30px;}
.marginL #story2 {margin-left:20px;}
.accentcolor #story1 {color:#ff00cc;} 
.accentcolor #story2 {color:#00ff66;} 
 etc, etc,

或者它是以另一种方式写的，例如：

#story1 .bg {background-color:#ccffff;} ?

但我不这么认为，因为浏览器只会看到给定id的第一次提及，而忽略其他类，因为页面应该只有给定id的一次出现，对吗

或者，出于某种原因，用类而不是id来标记每个可加载的故事div是否有利？ 如果我使用上述方法，如果我为这样一个给定的故事编写html，浏览器是否能够引用给定类的正确“版本”

<div id="story1" class="marginL bg fontcolor">...</div>

错,

在CSS

E中，F

匹配作为E元素后代的任何F元素

对于唯一元素使用

id

s，对于重复元素使用

class

es。如果要在重复的元素之间共享样式的属性，可以使用相同的类，但将它们封装在具有特定id或类的封闭元素中，并使用复合选择器：

错了

在CSS

E中，F

匹配作为E元素后代的任何F元素

对于唯一元素使用

id

s，对于重复元素使用

class

es。如果要在重复的元素之间共享样式的属性，可以使用相同的类，但将它们封装在具有特定id或类的封闭元素中，并使用复合选择器：

---

我不确定我是否理解你的问题，但我会给你举一些例子

..

将被选择

#story1.bg

（无空格）或其他

.bg#story1

——但是，最佳做法是

#id.class

仅当指定其他嵌套图元时，才应使用空格：

将被选中

div#story1.bg span.story

。如果你谈论的是相同的元素，请将它们放在一起

将按以下顺序选择：

div span em

如果指定

.bg{background color:red；}

然后指定

#story1.bg{background color:blue}

则

story1

的背景色将为蓝色，只要将该行放在初始

.bg

调用之后（或者使用

！important

语句）

请记住：ID应该只代表一个元素，并且应该是唯一的。类可以多次使用。例如，如果您有一组来自CNN、Fox news和ABC news的单一新闻帖子，您将有：

<div id="cnn" class="news_post">...</div>
<div id="foxnews" class="news_post">...</div>
<div id="abcnews" class="news_post">...</div>

。。。
...
...

---

ID是唯一的元素，其中一个

新闻帖子可以代表许多新闻帖子。
我不确定我是否理解你的问题，但我会给你一些例子

..
将被选择
#story1.bg
（无空格）或其他
.bg#story1
——但是，最佳做法是
#id.class

仅当指定其他嵌套图元时，才应使用空格：

将被选中
div#story1.bg span.story
。如果您谈论的是相同的元素，请将它们放在一起

将按以下顺序选择：
div span em

如果指定
.bg{background color:red；}
然后指定
#story1.bg{background color:blue}
则
story1
的背景色将为蓝色，只要将该行放在初始
.bg
调用之后（或者使用
！important
语句）

请记住：ID应该只代表一个元素，并且应该是唯一的。类可以多次使用。例如，如果您有一组来自CNN、Fox news和ABC news的单一新闻帖子，您将有：

<div id="cnn" class="news_post">...</div>
<div id="foxnews" class="news_post">...</div>
<div id="abcnews" class="news_post">...</div>

。。。
...
...

ID是唯一的元素，其中一个
新闻帖子可以代表许多新闻帖子。
您几乎是对的，因为您可以指定

.bg { background-color: red; }

然后使用：

#story1.bg { background-color: blue; }
#story2.bg { background-color: green; }

但是，由于您每次都必须重新定义
背景色
（或其他属性），因此无法在类名中定义该属性（因为它将被一次又一次地重新定义）根据类所附加到的元素的
id
，您会发现在
id
-选择器中应用
背景色
更简洁（我认为更易于维护）：

.bg { /* styles for elements of class 'bg' */ }

#story1 { background-color: blue; }
#story2 { background-color: green; }

特别是因为在css中，一个类实际上只对在一个位置设置多个元素的样式有利，而不是使用
id
，后者用于一次设置单个元素的样式。
您几乎是对的，因为您可以指定

.bg { background-color: red; }

然后使用：

#story1.bg { background-color: blue; }
#story2.bg { background-color: green; }

但是，由于您每次都必须重新定义
背景色
（或其他属性），因此无法在类名中定义该属性（因为它将被一次又一次地重新定义）根据类所附加到的元素的
id
，您会发现在
id
-选择器中应用
背景色
更简洁（我认为更易于维护）：

.bg { /* styles for elements of class 'bg' */ }

#story1 { background-color: blue; }
#story2 { background-color: green; }

特别是因为在css中，一个类实际上只对在一个位置设置多个元素的样式有利，而不是使用
id
，后者用于一次设置单个元素的样式。
您认为
#story1.bg
只匹配一个事件的假设是错误的。您在这里使用的是“后代”关系，因此此规则将应用于任何具有类“bg”的元素，该类元素是id为“story1”的元素的后代

关于你关于如何设计你的内容的问题