Question

除了<header>，<h1>，<h2>和<h3>元素之外，我想要将一小段CSS应用于所有文字

*:not(header):not(h1):not(h2):not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

我已经尝试了body:not，:not，甚至*:not，如上所示，但它们都没有奏效。我的所有标题和标题内容都改变了字体并应用了文本阴影。

以下是我的内容：

<body class="home">
    <header>
        <nav>
            <a href="index.html"><img src="logo.jpg"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="p2.html">Page 2</a></li>
                <li><a href="p3.html">Page 3</a></li>
                <li><a href="p4.html">Page 4</a></li>
                <li><a href="p5.html">Page 5</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <div id="main" class="left">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, ex, officiis, corporis earum similique repellat deleniti quam aliquam beatae temporibus recusandae dolorem. Dolorem, non alias ut laborum dignissimos quisquam enim.</p>
            <p>Obcaecati, rerum nihil quam neque officiis modi minima asperiores in eveniet doloremque reiciendis eligendi autem beatae molestiae fugit ut est quos culpa tempora quidem! Quae, dolorum exercitationem magnam est odit?</p>
            <p>Sapiente, facilis, ea nulla consectetur natus inventore beatae commodi repellat explicabo odio eos dolorum modi sequi ducimus aperiam eligendi quisquam ex! Quibusdam, ratione earum repellat optio cumque ipsum maiores voluptas.</p>
        </div>
        <div id="sidebar" class="left">
            <div class="section">
                <h3>Heading</h3>
                Irrelevant Content
            </div>
            <div class="section">
                <h3>Heading</h3>
                Irrelevant Content
            </div>
        </div>
    </div>
    <footer></footer>
</body>

有人可以解释为什么我做的不起作用，以及我可以做些什么来解决它？

Answer 1

我会改变你的做法。将要应用于所有内容的规则设置为body，然后覆盖header, h1, h2, h3：

body {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}
header, h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;;
    text-shadow: none;
}

您还可以使用您想要否定.not-me的样式创建一个类：

.not-me {
    font-family: Arial, Helvetica, sans-serif;;
    text-shadow: none;
}

然后将此类应用于您不希望像其他所有内容一样设置的任何元素：

<h1 class="not-me">Welcome</h1>

Answer 2

如果这是除用户代理的基本CSS之外应用的唯一CSS，那么您可以期望将这些规则应用于每个元素。

默认情况下，所有元素都将从其祖先继承该字体。您的规则告诉所有不是标题的元素，h1，h2或h3使用您选择的字体。所以header，h1，h2或h3仍然使用它们的默认值'inherit'并从它们的父元素继承那些相同的字体。

最好在您的身体上设置此字体选项，然后在标题h1，h2＆amp;上设置特定的替代字体选项。 H3。

Answer 3

您应该尝试这种方法：

body {
  // Style all elements
    color: red;
}

h1,h2,h3{
  // Style those elements different
  color: black;  
}

Answer 4

问题是默认情况下font-family和text-shadow属性通常都是inherit。这意味着您可以排除header元素以任何方式设置这些属性，但如果它的父元素（在这种情况下为body）包含在样式块中，它仍会继承它。因此，您应该更改font-family和text-shadow的默认值，例如：

* {
    font-family: monospace;
    text-shadow: none;
}

Answer 5

当您没有将规则应用于标题时，您将它们应用于标题中的元素。

body *:not(header):not(header):not(h1):not(h2):not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

header *,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: initial;
    text-shadow: initial;
}

如果您提供header *, h1, h2, h3, h4, h5, h6 inherit值，他们将使用font-family和您在text-shadow规则开头提供的:not:not。< / p>

Answer 6

:not(header), :not(h1), :not(h2), :not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

试试这个。

CSS：NOT（）选择器不工作

6 个答案: