하위 노드의 CSS 클래스를 재정의하는 방법은 무엇입니까?

Question

div를 만들고 싶습니다. 따라서 하위 노드가 기본 CSS 클래스를 무시할 수 없습니다. 예를 들어

는 :

.content { color:red; }

<div class="content"> 
 
\t \t <p style="color:green">Hello</p> 
 
\t \t <p style="color:blue">World !</p> 
 
</div>

나는 텍스트 색상은 '레드'싶습니다. 그 이유는 div의 내용이 사람의 입력에 따라 다르므로 글꼴, 색상, 크기를 수정하지 않기를 바랍니다 ...

"color : red! important;"라고 생각합니다. 하위 노드에서는 작동하지 않습니다.

Answer 1

나는 "color : red! important;"라고 생각합니다. 하위 노드는 작동하지 않습니다.

당신은 .content, .content * { } 같은 선택을 쓸 수 ...하지만 제출 된 데이터는 스타일 속성에 !important을 사용하여 재정의 할 수 있으므로 효과적인 해결책이 될 수 없다.

---

유일한 방법은 단락의 스타일 속성을 변경하는 것입니다. 이것은 스타일 시트로는 불가능합니다.

빠르고 쉬운 옵션은 JavaScript를 사용하여 모든 요소를 ​​반복하고 스타일을 제거하는 것입니다. 당신은

더 나은 접근 방법을 말했다 이후 :

사업부의 내용이 인간의 입력에서오고 나는

... 것 그들을 글꼴, 색상, 크기를 수정하고 싶지 않아 서버에 적절한 XSS 보호 기능을 추가하여 외부 입력을 위생적으로 처리 할 수 ​​있습니다.

이렇게하려면 서버 측 코드가 PHP로 작성된 경우 HTML 인식기와 같은 DOM 인식 형 화이트리스트 파서를 사용해야합니다. !/:

Answer 2

실제로 사용할 수있는 중요한 하위 노드에 정의 된 스타일을 재정의, 나는

.content * { color:red !important; }

<div class="content"> 
 
\t \t <p style="color:green">Hello</p> 
 
\t \t <p style="color:blue">World !</p> 
 
</div>