CSS：选择除一个以外的每个 div 元素答案

【问题标题】：CSS: selecting every div element except for oneCSS：选择除一个以外的每个 div 元素
【发布时间】：2021-03-19 20:11:40
【问题描述】：

我在使用 CSS 中的 ':not' 选择器时遇到问题，我想选择 head 下的所有内容，除了标题 (h1) 我尝试使用 '#head:not(h1)' 但它仍然选择了下面的所有内容＃头。选择除 h1 之外的所有内容的正确方法是什么？谢谢。

<html>
<head>
<style>
    /*I want to select all the elements under head id except for h1 title*/
    #head:not(h1){
        background: red;
    }
</style>
</head>
<body>
<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>
</body>
</html>

【问题讨论】：

您当前的 CSS 选择器仅针对 ID 为 head 的元素，而不是您想要的元素的子元素 - 考虑在 #head 和 :not(h1) 之间添加一个空格（即 @987654321 @) 来解决问题。
我很困惑“选择除一个之外的每个 div 元素”与选择除 h1 标签之外的所有内容有何关联

标签： html css

【解决方案1】：

你可以这样做。

#head *:not(h1) {
    background: red;
}

或

#head :not(h1) {
    background: red;
}

但是，这意味着它选择了“#head”下的“h1”以外的所有内容，这意味着它包含“hgroup”，它是“h1”的父元素。

在这种情况下，'h1'的背景颜色默认是'透明'，所以背景颜色是红色的，因为'hgroup'。

#head *:not(h1) {
    background: red;
}

<div id="subpage">
    <div id="head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class="posts">
            <ul id="post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class="posts">
            <ul id="post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id="whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

【讨论】：

您好，感谢您的建议，我尝试按照此操作，但由于某种原因，没有显示背景颜色。
@LeilaK。尝试在末尾添加!important 标签

【解决方案2】：

您可以单独指定h1 元素具有基色。

#head h1 {
    background: white;
}
#head * {  /* depending on the look you want, you may not need the * */
    background: red; 
}

<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

【讨论】：

【解决方案3】：

#subpage div.head *:not(h1) {
     background: red;
}

使用这样的样式。

转到此链接，您可以了解 https://stackoverflow.com/a/16769552/8928037

【讨论】：

【解决方案4】：

首先您要为<h1> 添加背景颜色。试试这个。

#head h1{
    background: white;
}

#head :not(h1) {
    background: red ;
}

<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

【讨论】：