이미지를 숨기지 않고 모든 하위 요소의 배경색을 변경하십시오.

Question

웹 페이지의 서식을 편집하는 응용 프로그램을 만들고 있습니다. 선택한 div의 모든 하위 div의 배경색을 변경하려고하지만 현재 코드는 div 내의 이미지를 사라지게합니다.

.blah *:not(img) { 
    background-color: #fffdd0 !important; 
} 

시도한 : not() 이미지에 적용되지 않는 형식을 만들려고했는데 아무 것도 변경하지 않았습니다. 배경색을 이미지에 적용하지 않거나 이미지를 숨기지 않는 방법이 있습니까?

Answer 1

내 생각에 img은 children이 아니지만 .blah div의 grandchildren이라고 생각합니다. 그것이 코드가 작동하지 않는 이유입니다. 그래서 (내 경우 .child)를 img의 부모는 배경을 취득하고 이미지가 background-color 스타일을하지 않지만 그래서 배경 이미지 아래에 나타납니다

이 같은 (모르는를 시도 할 수 귀하 HTML 구조 또는 그것이 얼마나 복잡한) 스택 오버플로

div *:not(.child) { background-color: #fffdd0 !important;} 
 
.parent > .child *:not(img){ background-color: red !important;}

<div class="parent"> 
 
<p>Child Text</p> 
 
<h1>Child Heading</h1> 
 
    <div class="child"> 
 
     <img src="http://placehold.it/350x150"> 
 
     <p>grandChild Text</p> 
 
    </div> 
 
</div>