Início / coding / Perguntas / 78549578
Accepted
jsx97
Asked: 2024-05-29 20:35:32 +0800 CST

Use a classe pseudo 'not' para estilizar todos os elementos, exceto aquele que é filho de um elemento específico

  • 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>

Quero deixar <h1>os elementos vermelhos, exceto o <h1>interior <header>. Eu posso fazer isso usando,

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

mas talvez exista uma maneira melhor, usando uma única declaração e sem sobrescrever?

Eu tentei :not(header) h1 { color: red; }, mas por algum motivo não funciona. Outra abordagem é body > h1 { color: red; }, mas é um tanto frágil para mim.

html

2 respostas

  1. Best Answer

    Quero deixar <h1>os elementos vermelhos, exceto o <h1>interior <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;
}

    Isso tornará todos <h1>os elementos vermelhos, exceto aqueles dentro de a <header>.

    • -2

relate perguntas