Question

我认为（？）我可以继续重复使用同一组类名，但让他们通过以这种方式为各种故事写出单个样式表来为不同的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>

每次只会出现一个故事，每个故事都通过jQuery加载到一个插座部门，除了class =“container”之外，它预先剥离了所有页面的样式类。也许有一种更优雅的方式为每个故事分配样式而不需要在.css（......）中将所有内容写成字符串？或者我应该首先调用.load的专用样式表让jQuery在故事内容之上的样式标签之间写下它？

我到处寻找有关'复合选择器'混合ID与类的更多信息，但只提到元素与类名相结合，例如：

h1, h2, h3 .myStyle {font...color..etc}

Answer 1

错误，

CSS E F中的

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

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

CSS2 pattern matching selectors.

Answer 2

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

<div id="story1" class="marginL bg fontcolor">...</div>将被选中#story1.bg（没有空格）或其他.bg#story1 - 但是，最佳做法是#id.class

仅在指定其他嵌套元素时才使用空格：

<div id="story1" class="marginL bg fontcolor"><span class="story"></span></div>将被选中div#story1.bg span.story。如果你在谈论相同的元素，请将它们放在一起。

将按顺序选择

<div><span><em>：div span em

如果您指定.bg {background-color: red;}然后#story1.bg {background-color: blue}，story1的背景颜色将为蓝色，只要您在初始.bg电话后放置该行（或者您使用!important声明。

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

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

ID是唯一元素，其中news_post可代表许多新闻帖。

Answer 3

您认为#story1 .bg仅与单个事件匹配的假设不正确。您在这里使用'后代'关系cf. CSS3 cheat sheet，因此此规则将适用于具有类'bg'的任何元素，该元素是id为'story1'的元素的后代。

关于如何设计内容的问题。虽然我只能猜测你的最终结果是什么样的，但一些一般的建议是

将id用于它们：独特元素
将类用于可重用样式，属于某个“类别”的元素
尽量避免将纯视觉设计美学与某些元素特有的属性混合在一起的类，而是尝试根据内容语义对它们进行分组

要解释后者：你应该避免使用类似“书本两个像素到左边”和“绿色 - 故事 - 边框左”这样的类，而是专注于元素的内容，为“书”和“故事”创建课程，并在这些课程中分享他们的共同特征。遵循这一原则使您的CSS从长远来看更加可维护。使用纯粹的可视化类本身并不是一件坏事，但如果你使用它们，你应该清楚地将它们与“语义”类分开，并将它们的属性保持在最低限度。

所以在你的'故事'的情况下，一个好的开始是提出一个课堂“故事”。它符合要求 - 你有几个故事肯定会分享一些共同的功能，它非常准确地代表语义。如果分开，你可以将语义类与纯函数类结合起来：

<div class="story border-on-top"/>
<div class="story"/>
<div class="story border-on-bottom"/>

Answer 4

你几乎是对的，因为你可以指定

.bg { background-color: red; }

然后使用：

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

但是，由于每次都必须重新定义background-color（或其他属性），否则会破坏在类名中定义该属性的目的（因为它将被重新定义时间和再次）。当你试图根据类附加的元素的background-color来设置id（或其他）的样式时，你会发现它更简洁（更易于维护，我' d想象）在background-color - 选择器中应用id代替：

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

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

特别是因为css中的一个类实际上只对一个地方的样式多个元素有益，而不是使用id，它用于设置单个元素的样式。一段时间。

我可以针对不同的ID以不同的方式创建单个类名称样式吗？

4 个答案: