css 在继承中使用 :not() class

Question

我正在努力解决 css 的问题，我在继承方面遇到了一点问题。

实际上，我的代码是这样的：

HTML

<div class="title-in-green">
<h1> my title</h1>
</div>

CSS

.div {color : #00FF00;}
.h1 {color : #FF0000; other text size...}

问题：我的 h1 文字是红色的。

正常，我是这样设置的。。。但是我要绿色，改不了h1 CSS.

所以我尝试在 css 中使用 :not() 函数：

.div {color : #00FF00;}
.h1:not(.title-in-green) {other text size...} //if i have a div surrounding my h1, wanting the text green
.h1(.title-in-green) {color : #FF0000; other text size...} //if not, h1 is red

不工作，正常的 h1 不是 title-in-green class...

我已经试过了:not(div.title-in-green)但是还是不行...

我不知道如何设置它，我想请你帮忙。

提前，谢谢。

Answer 1

就这么简单：

div {color : #00FF00;}
h1 {color : #FF0000; other text size...}
/* take a look */
div h1 { color: #00ff00; }

去除点，因为点表示类名，以这种方式定位元素。

div h1表示all <h1> that is inside a <div>

Answer 2

您不应该在 CSS 中的 HTML 元素名称前使用点。

此外，您 div 有 class .title-in-green，而不是 h1，所以将您的 :not 放在 div.但是，对于您的具体情况，不需要使用 :not，因为您希望例外是 .title-in-green class.

Fiddle: https://jsfiddle.net/ahddxw2x/

HTML

<div class="title-in-green">
  <h1> my title</h1>
</div>
<div>
  <h1> my title</h1>
</div>

CSS

div {
  color: #00FF00;
}

/* h1 is red by default ... */
h1 {
  color: #FF0000
}

/* ... but not when inside a div with class .title-in-green */
div.title-in-green h1 {
  color: #00FF00;
}

css 在继承中使用 :not() class

css using :not() on inheritance class

html

css