다른 HTML 문서 요소에 대해 동일한 규칙 이름을 사용하는 다른 CSS 시트 사용

Question

동일한 규칙 이름을 가진 여러 스타일 시트를로드 한 다음 페이지의 다른 요소에 적용하는 방법이 필요합니다. 이것이 가능한가?

다음은 내가하고 싶은 것의 예입니다. 아래의 두 가지 스타일 시트를 보자

style1.css :

.size{ 
    color: #FF6600; 
    font-size: 18px; 
} 

style2.css : 나는 페이지에 둘을 가져올 수 있도록하고 싶습니다

.size{ 
    color: #FF0000; 
    font-size: 14px; 
} 

(아마와 어떤 종류의 ID), 특정 div 내의 텍스트를 style1.css의 규칙을 사용하도록 설정하고 다른 div는 style2.css의 규칙을 사용해야합니다.

내 응용 프로그램 사용자가 페이지의 다른 위젯에 대한 사용자 지정 스타일 시트를 업로드 할 수 있기 때문에 이런 식으로해야합니다. 시트가 동일한 규칙 명명 체계를 사용한다면이 계획은 효과가 있습니다.

Answer 1

대답은 이렇게 할 수 없습니다. 마지막에로드 된 규칙이 우선 적용됩니다.

당신은 다른 클래스 나 ID를 가진 다른 위젯을 차별화해야하고, 당신은 같은 규칙이 없습니다.

#widgetB .size{ 
     color: #FF0000; 
     font-size: 14px; 
} 

#widgetA .size{ 
     color: purple; 
     font-size: 10px; 
} 

Answer 2

마지막으로로드 된 스타일 시트에서 선언 된 규칙은 일치하는 모든 요소에 적용됩니다.

Answer 3

어쩌면 당신은 기본 페이지 CSS를 제거하고 기본적으로 클라이언트 측에 스타일 시트를 교환, 사용자의 스타일 시트로 교체 jQuery를 같은 것을 사용할 수 있습니다.

Answer 4

어쩌면 각 위젯을 iframe 내에 넣을 수 있습니다. 해당 iframe에서 해당 위젯에 대한 사용자 정의 스타일 시트를 호출합니다. 그렇게하면 더 많은 모듈성을 얻을 수있을뿐만 아니라 문제를 해결할 수있는 치트에 대해 걱정할 필요없이 직접 원하는 것을 할 수 있습니다.

Answer 5

"아니오"라는 질문에 직접 대답하십시오. CSS 코드 자체에는 일종의 컨텍스트가 있어야합니다.

"내 응용 프로그램 사용자가 페이지의 다른 위젯에 대한 사용자 정의 스타일 시트를 업로드 할 수 있습니다."- 내가 읽은 방식대로 각 위젯을 고유 한 ID 또는 이와 유사한 형태로 배치하는 것이 좋습니다.

그런 다음, 사용자로, 여전히 동일한 기본 이름, 컨텍스트의 비트와 함께 스타일 시트를 업로드 할 수 :

#widget-one .size { ... } 

#widget-two .size { ... } 

그러나 문맥/접두사의 일종이 필요합니다.