如何将CSS应用于除特定类别的父div内的任何div之外的div？

huangapple
go评论101阅读模式
英文:

How can I apply CSS to any div except those inside a parent div with a specific class?

问题

我有一个应用于所有div的全局CSS，但我想对具有特定类的父div内的div做出例外，示例中的类是should-not-apply。

  1. div:not(.should-not-apply) {
  2.   font-size: 20px !important;
  3.   font-weight: 500 !important;
  4. }

我已经研究了:not 选择器，但它仅适用于元素，而不适用于它们的子元素。

我之所以需要以这种方式修改CSS内容而不是覆盖，是因为我正在使用服务器端渲染（SSR）创建页面，并且预定义的CSS内容会在此处的CSS文件之前应用，但我希望使用来自SSR 的CSS内容，而不是全局的CSS。

如何实现这样的任务？

英文:

I have a global CSS that applies to all div, but I want to make an exception for the divs inside a parent div with a specific class, which in the example is should-not-apply class.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div {
  2.   font-size: 20px !important;
  3.   font-weight: 500 !important;
  4. }

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.   &lt;div&gt;
  3.     0 should apply
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;should-not-apply&quot;&gt;
  6.     &lt;div&gt;
  7.       &lt;div&gt;
  8.         1.1 should not apply
  9.       &lt;/div&gt;
  10.       &lt;div&gt;
  11.         1.2 should not apply
  12.       &lt;/div&gt;
  13.     &lt;/div&gt;
  14.     &lt;div&gt;
  15.       2 should not apply
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18.   &lt;div&gt;
  19.     3 should apply
  20.   &lt;/div&gt;
  21.   &lt;div&gt;
  22.     4 should apply
  23.   &lt;/div&gt;
  24. &lt;/div&gt;

<!-- end snippet -->

I have looked into :not Selector, but it only applies to the elements, not their children.

The reason I need to modify the CSS content this way instead of overwriting, because I am creating the page with server-side rendering (SSR) with predefined CSS content, which gets applied before the CSS file here, but I want the CSS content from that SSR instead of this global one.

How can I achieve such task?

答案1

得分: 0

div:not(.should-not-apply > div) {
font-size: 20px !important;
font-weight: 500 !important;
}

英文:

It should work:

  1. div:not(.should-not-apply &gt; div) {
  2.     font-size: 20px !important;
  3.     font-weight: 500 !important;
  4. }

答案2

得分: 0

  1. <!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-css -->
  4. :not(.should-not-apply div) {
  5.   font-size: 20px;
  6.   font-weight: 500;
  7. }
  8. div {
  9.   font-size: initial;
  10.   font-weight: initial;
  11. }
  13. <!-- 语言: lang-html -->
  14. <div>
  15.   <div>
  16.     0 应用
  17.   </div>
  18.   <div class="should-not-apply">
  19.     <div>
  20.       <div>
  21.         1.1 不应用
  22.       </div>
  23.       <div>
  24.         1.2 不应用
  25.       </div>
  26.     </div>
  27.     <div>
  28.       2 不应用
  29.     </div>
  30.   </div>
  31.   <div>
  32.     3 应用
  33.   </div>
  34.   <div>
  35.     4 应用
  36.   </div>
  37. </div>
  39. <!-- 结束代码片段 -->
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. :not(.should-not-apply div) {
  2.   font-size: 20px;
  3.   font-weight: 500;
  4. }
  5. div {
  6.   font-size: initial;
  7.   font-weight: initial;
  8. }

<!-- language: lang-html -->

  1. &lt;div&gt;
  2.   &lt;div&gt;
  3.     0 should apply
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;should-not-apply&quot;&gt;
  6.     &lt;div&gt;
  7.       &lt;div&gt;
  8.         1.1 should not apply
  9.       &lt;/div&gt;
  10.       &lt;div&gt;
  11.         1.2 should not apply
  12.       &lt;/div&gt;
  13.     &lt;/div&gt;
  14.     &lt;div&gt;
  15.       2 should not apply
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18.   &lt;div&gt;
  19.     3 should apply
  20.   &lt;/div&gt;
  21.   &lt;div&gt;
  22.     4 should apply
  23.   &lt;/div&gt;
  24. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 17:44:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76603585.html
  • css
  • html
  • next.js
  • reactjs
  • server-side-rendering
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定