如何排除 CSS 选择器应用于类内的元素？答案

【问题标题】：How to exclude a CSS selector from applying to elements inside a class?如何排除 CSS 选择器应用于类内的元素？
【发布时间】：2017-05-12 03:17:20
【问题描述】：

html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, 
sup, sub, tt, var, u, i, center, ul, ol, li, dl, dt, dd, tfoot, caption, form, fieldset, 
legend, input, button, textarea, select, label, applet, object, iframe, audio, video, 
canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, 
nav, section, summary {
    font-family: inherit; line-height: inherit; 
    vertical-align: baseline; border: 0; outline: 0; padding: 0; margin: 0;
}

我不希望这影响div.base 中的任何元素。

你有解决办法吗？

【问题讨论】：

“我相信 OP 希望他在问题中包含的声明适用于所有案例，但不适用于 div.base 的孩子 – Patrick Moore”
只需用!important 重写div.base 的那些属性

标签： css

【解决方案1】：

试试 :not() 选择器。

否定 CSS 伪类 :not(X) 有一个函数式表示法，将简单的选择器 X 作为参数。它匹配参数未表示的元素。 X 不得包含另一个否定选择器。（来自MDN）

* { } 设置所有元素的样式。添加:not(.base) 会排除具有类基的元素。

*:not(#div1){
    color:red;
}

例子：

*:not(.base) {
  font-family: inherit;
  line-height: inherit;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}

<body>
  <h1>Hello</h1>
  <div>
    <h1 class="base">Text</h1>
  </div>
</body>

【讨论】：

如果他只想定位类名为base的div，我认为它不起作用

【解决方案2】：

添加此 CSS 规则以重置 div.base 中元素的每个属性：

div.base * {
    font-family: initial; line-height: initial; 
    vertical-align: initial; border: initial; outline: initial; padding: initial; margin: initial;
}

initial CSS 关键字将属性的初始值应用于元素。 ——MDN

【讨论】：

【解决方案3】：

如果您的问题是如何将单个 CSS 属性或一组属性应用于所有内容，那么您可以这样做。

   * {
      font-family: inherit; 
      line-height: inherit; 
      vertical-align: baseline; 
      border: 0; 
      outline: 0; 
      padding: 0; 
      margin: 0;
    }
   div.base {
    #set properties for div.base here
   }

【讨论】：

我相信 OP 希望他在问题中包含的声明适用于所有案件，但不适用于 div.base 的孩子
你读过这个问题吗？这显然不是他们想要的
他可以覆盖div.base上的样式我会编辑显示。
@AndrewLi 怎么不是他们想要的？
@MikeTung 在您编辑之前，这不是他们想要的。你只是假设他们的问题。