patular div에 여러 CSS 선택기를 적용하는 방법은 무엇입니까?

저는 CMS의 종류를 만들고 있습니다. 이 시스템에서 각 편집기는 아래와 같이 자신의 CSS를 정의 할 수 있습니다. 이 스타일은 자신의 기사에 적용해야합니다.patular div에 여러 CSS 선택기를 적용하는 방법은 무엇입니까?

<style> 
p{ 
color:blue;text-align:center; 
} 
a{ 
color:red; 
} 
</style>

이러한 스타일은 특정 div (이 경우 id="editors_area")에 적용되어야합니다.

<body> 
    <div id="editors_area"> 
     ===Styles should be applied only here.=== 
     Each editors article are displayed in this area. 
    </div> 
    ===Styles should NOT be applied here.=== 
</body>

는이를 달성하기 위해, 나는 다음과 같은 측면 봉사에 후손 선택기로, 편집자의 CSS에 #editors_area을 삽입 할 계획을 가지고있다.

<style> 
#editors_area p{ 
color:blue;text-align:center; 
} 
#editors_area a{ 
color:red; 
} 
</style>

그러나 나는 위의 요구 사항을 달성하는보다 간단한 방법이 있다고 생각합니다.

편집 자바 스크립트 코드를 삭제했습니다. 어느 쪽이 여기에 적합하지 않았다.

어떤 아이디어라도 환영합니다. 미리 감사드립니다.

출처

2012-10-24 naota

CSS의 일부 서버 처리를 수행하여 선택기를 수정해야합니다. – Blender

jQuery는 CSS가 아닙니다. – BoltClock

SASS과 SCSS는 다음과 같은 기능을 제공

(당신이 프론트 엔드 (front end) 사람에게서 얻을 때까지 가능한 한 당신의 질문을 완전히 빠뜨리지 않는 한, 이것과 같은 일을하십시오.) 같은

뭔가 :

#editors_area 
    a 
     color:blue 
     text-align:center 
    p 
     color:red

은 당신이 최선을 다하고 어떤 언어에 따라, 그것은 체크 아웃 가치가있을 수도 있습니다. 루비, 파이썬, PHP, 자바에 대한 구현을 보았습니다.

출처

2012-10-24 07:41:21 jmervine

대단히 감사합니다. 방금 SASS와 SCSS를 확인했습니다. 이것들은 내가 원했던 것일 수있다. 나는 지금부터 그들을 공부할 것이다. – naota

SASS와 SCSS는 CSS 코드를 생성하는 방법이며, CSS 코드는 여전히'#editors_area p'와 같은 것을 가지고 있습니다. 간단한 경우 SASS와 SCSS는별로 도움이되지 않습니다. –

CSS는이를 위해 설계되었으므로 첫 번째 방법이 올바른 방법입니다. jQuery 메서드가 작동하지 않는다고 말할 필요도 없습니다.

css 속성을 페이지로드 이후에 필요할 때만 변경해야하고 심지어 addClass() 또는 removeClass()을 사용해야하며 CSS 파일에 이러한 클래스가 정의되어 있어야합니다. 이것은 더 나은 관심사의 분리입니다.

출처

2012-10-24 07:35:43

감사합니다. Rory McCrossan, 당신 말이 맞습니다. 나는 작동하지 않는 코드를 작성해서는 안된다. 제발 누군가가 자바 스크립트로 아이디어를 가지고 있다고 말하려고했습니다. – naota

문제가되지 않았지만 CSS가 특별히 필요한 작업을 위해 설계되었다는 점을 분명히 밝히고 싶었습니다. –

는 노력이

$("#editors_area > *").css("color","blue"); // * may be p or a whatever

출처

2012-10-24 07:36:51

Mishu Sarker에게 감사드립니다. 귀하의 조언에 감사드립니다. 도움이 될 수 있습니다. – naota

당신은 다음과 같이 당신이 할 수있는, jQuery를 동적으로 CSS 블록을 삽입하는 방법을 찾는 경우 :

$('<style type="text/css"> 
    #editors_area p { 
     color:blue;text-align:center; 
    } 
    #editors_area a { 
     color:red; 
    } 
    </style>').appendTo('head');

출처

2012-10-24 07:38:50 Nelson

** 할 수는 있지만 **하지 마세요 ** –

@RoryMcCrossan 예 일반적으로는 권장 사항이 아니라는 점에 동의합니다. 특정 시나리오에서 유용 할 수 있습니다. OP의 각 편집자가 각자 편집 한 CSS에 대해 댓글을 달았습니다.이 경우 선호합니다. 이 솔루션은 .css 파일을 db의 내용으로 즉석에서 작성하는 것이 아닙니다. – Nelson

@ 넬슨, 귀하의 조언에 진심으로 감사드립니다. 그리고 나의 요구를 깊이 읽어 주셔서 감사합니다. 이것은 매우 도움이되었습니다. – naota

patular div에 여러 CSS 선택기를 적용하는 방법은 무엇입니까?

답변

관련 문제