css using：not（）on inheritance 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。

所以我使用try :not()功能CSS：

.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类...

我试过:not(div.title-in-green)，但它不工作太...

我不明白我该如何设置，并且我问你一点帮助。

提前，thx。

Answer 1

在CSS HTML元素名称前面你不应该用点来。

此外，你div有类.title-in-green，而不是h1，所以把你的:not上div。但是，对于您的具体情况，使用:not是不必要的，因为您希望例外是.title-in-green类。

小提琴：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; 
} 

Answer 2

像这样简单：

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>