Html 具有相同子类的多个id。需要选择器

因此，我将使用以下标记：

<div id="content-sidebar">
    <div class="entry">
    </div>
    <div class="sidebar">
          Sidebar Content
    </div>
</div>

我还有一个标记，它在没有侧边栏的情况下对父div使用不同的样式，只是调整宽度，但对child.entry类需要相同的样式

什么选择器会告诉它在.entry类中使用内容边栏和内容栏，而不必使用冗余代码？content sidebar.entry、content nosidebar.entry{}是最好的方法还是有其他方法来选择它们

谢谢

如果.entry比content sidebar.entry、content nosidebar.entry包含更多元素，那么在不知道文档的确切结构的情况下，您将不得不通过两个ID进行显式选择

或者，如果您真的不想修改HTML，您可以使用属性前缀选择器进行作弊，但我不建议您这样做，除非您知道自己在做什么—修改HTML以适应选择器通常更干净、更简单：

div[id^="content-"] .entry

---

您可以使用的选择器取决于您要执行的操作

.entry{}将应用于两个容器中的类。两者之间的任何CSS共享都应该添加到简单选择器中，该选择器应该列在CSS中

<div id="content-sidebar" class="content">
    <div class="entry"></div>
    <div class="sidebar">Sidebar Content</div>
</div>

<div id="content-nosidebar" class="content">
    <div class="entry"></div>
</div>

从这里开始，如果您想要自定义任一列，或者让CSS只应用于一列，而不应用于另一列，那么您可以使用content sidebar.entry{}或content nosidebar.entry{}

如果还有其他地方有.entry类，并且希望CSS同时应用于内容侧栏和内容侧栏，则可以使用组合选择器content sidebar.entry，content nosidebar.entry{}。在这种情况下，将一个公共的.content类添加到content侧栏和content-nosidebar可能更有意义。这将允许您使用.content.entry选择器，而不必将这些ID插入所有CSS中

<div id="content-sidebar" class="content">
    <div class="entry"></div>
    <div class="sidebar">Sidebar Content</div>
</div>

<div id="content-nosidebar" class="content">
    <div class="entry"></div>
</div>

您构建CSS的原因是为了

效率-通用CSS被全局应用，而不是重复应用 多次考虑CSS 组织-列出了常见的CSS 首先，对特定部分的更具体CSS进行分组和 随后列出，对选择器的CSS特殊性提出质疑 使订单变得无关紧要。

---

祝你好运-马特

为什么不能直接使用.entry？.entry也会出现在文档的其他地方吗？Yes entry也会出现在其他对象中作为子对象。+1或者，如果OP在其他地方有.entry，他们也可以向这些元素添加另一个类，然后执行类似.entry.otherClass{}的操作，谢谢！我可以在我的css文件中指定.entry而不是content nosidebar.entry，它工作得很好。

div[id^="content-"] .entry

<div id="content-sidebar" class="content">
    <div class="entry"></div>
    <div class="sidebar">Sidebar Content</div>
</div>

<div id="content-nosidebar" class="content">
    <div class="entry"></div>
</div>

.entry {
    /** CSS common to all .entry elements **/
}
.content .entry {
    /** CSS common to all .entry element in all .content areas **/
}
#content-sidebar .entry,
#content-nosidebar .entry{
    /** CSS common to .entry elements inside #content-sidebar and #content-nosidebar **/
}
#content-sidebar .entry{
    /** CSS specifically for .entry elements inside #content-sidebar **/
}
#content-nosidebar .entry{
    /** CSS specifically for .entry elements inside #content-nosidebar **/
}