主页 / coding / 问题 / 78549578
Accepted
jsx97
Asked: 2024-05-29 20:35:32 +0800 CST

使用 'not' pseduo-class 来设置除特定元素的子元素之外的所有元素的样式

  • 772

h1 { color: red; }
header h1 { color: revert; }
<body>
  <header>
    <h1>Title</h1>
  </header>
  <h1>Level-1 heading</h1>
  <p>Body text.</p>
  <h1>Level-1 heading</h1>
  <p>Body text.</p>
</body>

我想让<h1>元素变成红色，除了<h1>inside <header>。我可以使用，

h1 { color: red; }
header h1 { color: revert; }

但也许有更好的方法，使用单个声明而不覆盖？

我尝试过:not(header) h1 { color: red; }，但由于某种原因它不起作用。另一种方法是body > h1 { color: red; }，但它对我来说有点脆弱。

html

2 个回答

  1. Best Answer

    我想让<h1>元素变成红色，除了<h1>inside <header>。

    h1:not(header h1) {
  color:red
}


    h1:not(header h1) {
  color: red
}
    <header>
  <h1>Title</h1>
</header>
<h1>Level-1 heading</h1>
<p>Body text.</p>
<h1>Level-1 heading</h1>
<p>Body text.</p>

    • 4 

  2. body:not(header) > h1 {
color: red;
}
    <body>
  <header>
    <h1>Title</h1>
  </header>
  <h1>Level-1 heading</h1>
  <p>Body text.</p>
  <h1>Level-1 heading</h1>
  <p>Body text.</p>
</body>

    body:not(header) > h1 {
    color: red;
}

    这将使所有<h1>元素变成红色，除了<header>.

    • -2

相关问题