Question

所以我将有以下标记：

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

它的样式如下：

#content-sidebar{
    float: left;
    padding-left: 10px; 
    position: relative;
    width: 580px;
    text-align: left;
    padding-right: 20px;
    background: url(../_images/content-line.gif) top right repeat-y;
   }

#content-sidebar .entry{
        position: relative;
        padding-left: 16px;
    }

#content-sidebar .entry a:hover {
        color: #5CB414;
        text-decoration: none;
}

我也有标记为父div使用不同的样式而没有侧边栏（只调整宽度），但对于子.entry类需要相同的。

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

content-nosidebar ID需要稍微不同的样式，但.entry子选择器完全相同。

#content-nosidebar{
    padding-left: 10px; 
    position: relative;
    text-align: left;
    padding-right: 20px;
}

哪些选择器会告诉它使用内容侧边栏和内容-nosidebar与.entry类而不必使用冗余代码？ #content-sidebar .entry, #content-nosidebar .entry{}是最好的方式还是有另一种选择方法？

谢谢！

Answer 1

如果.entry涵盖的元素多于#content-sidebar .entry, #content-nosidebar .entry，那么在不知道文档的确切结构的情况下，您必须明确选择两个ID。

或者你可以通过使用属性前缀选择器作弊，如果你真的不想修改HTML，但除非你知道你在做什么，否则我不会推荐它（修改你的内容通常更简洁，更简单） HTML代替您的选择器）：

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

Answer 2

您可以使用的选择器取决于您想要做什么。

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

从那里开始，如果您要自定义任一列，或者只允许应用于一列而不是另一列的CSS，则可以使用#content-sidebar .entry{}或#content-nosidebar .entry{}。

如果您有其他地方.entry类，并且您希望CSS适用于#content-sidebar和#content-sidebar，则可以使用组合选择器#content-sidebar .entry, #content-nosidebar .entry{} 。在这种情况下，将.content的公共类添加到#content-sidebar和#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将按以下顺序最有意义：

.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 **/
}

你构建CSS的原因是

效率 - 通用CSS全局应用而不是重复多次通过CSS
组织 - 列出了常见的CSS 首先，针对特定部分的更具体的CSS进行分组事后列出，争议选择者的CSS特异性使订单无关紧要。

祝你好运。 -Matt

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

2 个答案: