DOM 요소에 여러 클래스가있는 CSS 특수성

Question

왼쪽/오른쪽 float가있는 규칙에 대해 html 문서 세트의 CSS를 구문 분석해야합니다.

하나의 클래스가있는 중첩 된 DOM 요소 집합이있을 때 어떻게 모든 것이 작동하는지 알았습니다. 규칙의 특수성은 계산 된 선택자 수, id, 클래스, 태그 elem을 기반으로합니다. 동점 일 경우 마지막 규칙을 선택하십시오.

그래서 특이성이라는 생각은 DOM 태그 요소와 일치하는 선택 자의 특수성을 기반으로 선택되는 규칙이 많아야한다는 것입니다.

가장 깊은 DOM 하위뿐만 아니라 상위 수준에서 여러 개의 클래스가있는 경우 어떻게해야합니까? 간단한 형태의 여러 클래스는 여러 규칙을 선택하고 적용합니다. 그러나 나는 어떻게 특이성이 이것과 상호 작용 하는지를 결정하기위한 지침의 완전한 세트를 이해할 수 없다. 예 : 일반적으로 특이성은 하나의 규칙, 가장 높은 특이성을 선택합니다. 그러나 터미널 DOM 요소에 여러 클래스가있는 경우 인터넷에서 보여지는 간단한 경우 여러 클래스에 의해 선택된 여러 규칙이 동일한 특이성을 갖습니다. 그러나 훨씬 더 복잡한 시나리오를 볼 수 있으며 규칙을 선택하는 방법을 알지 못합니다.

p.cls1 { 
} 
div#id1 p.cls2 { 
} 
.cls3 { 
} 

HTML : : 3 서로 다른 특이성 번호가 있지만

<div id="id1"><p class="cls1 cls2 cls3">... 

모든 3 클래스도 선택받을

여기 경우입니다. 그러나 외부 div에 여러 클래스를 제공하여 문제를 악화시킬 수 있습니다. 무슨 일이 일어나고 있는지, 그리고 여러 클래스가 특정 규칙에도 불구하고 여러 규칙을 선택하는 방법을 알려주는 CSS 2.1 사양의 정보를 찾을 수 없습니다.

앤디

Answer 1

여기에서 실제로 묻고있는 내용을 파악하는 것은 약간 어렵습니다. 구체적인 예가 도움이 될 것입니다.

1. 인라인 스타일
2. 포함 스타일 (동일한 문서)
3. 외부 참조 스타일 모두 내

:

그러나 가장 높은에서 가장 낮은 스타일의 우선 순위 일반적으로

는 것입니다 그 중 으로 표시된 스타일이 인 경우 우선 순위가 더 높습니다 (특이성은 동일 함). 그러나 우선 순위 수준이 높은 스타일 (예 : 인라인 스타일)은 특수성에 관계없이 항상 다른 스타일을 덮어 씁니다. 따라서 요소의 인라인 스타일은 항상 포함 된 스타일 시트의 스타일을 덮어 씁니다.

여기 http://www.htmldog.com/guides/cssadvanced/specificity/

중첩 된 선택기의 그룹의 실제 특이도는 일부 계산을합니다 ... 당신이 이미 특이성에 대해 알고 있습니다 더 많은 정보입니다. 기본적으로 모든 id 셀렉터 ("#whatever")의 값은 100이며 모든 클래스 선택기 (".whatever")은 값 10이며 모든 은 HTML 선택자 ("무엇이든지")의 값은 입니다.그럼 당신은 그들 모두를 추가하고 헤이 프레스토, 당신은 특정 값을 가지고.

이 모든 !important 단지 !important 모든 비 !important 스타일 우선 주어진 동일한 규칙이 적용되는 다른 층을 추가하고, 상기 된.

업데이트 : 당신의 예는 약간 궁금해서, 당신이 오해의 대상이라고 생각합니다. 특이성은 이 아니며은 다른 클래스와 동일한 요소에 전체적으로 덮어 쓰는 클래스라는 것을 의미합니다. 대신에 "스타일 속성이 동일한 경우이 더 높은 특이성을 가진 것이 다른 것을 덮어 씁니다."

예에서 다른 클래스 스타일 중 하나와 일치하는 cls2의 특성이이를 덮어 씁니다. 그러나 스타일 충돌이 없다면 아무런 문제가 없습니다! 그것은 단지 모든 스타일을 취할 것입니다.

아마도 이전 개체에 변수를 할당하는 것과 같이 생각하는 것이 도움이 될 것입니다. 변수를 참조하는 방법은 여러 가지가 있지만 구체적으로 실행 순서가 정의됩니다. 마지막으로 변수를 설정하는 할당은 객체가 실제로 렌더링 될 때의 상태입니다.

Answer 2

충돌이 발생하지 않는 한 각 선택기의 모든 규칙이 적용됩니다.

p.cls1 { 
    margin: 10px; 
    padding: 3px 
} 

div#id1 p.cls2 { 
    margin :5px; 
    background:green; 
} 

.cls3 { 
    margin :20px; 
    position:relative 
} 

이 그런 다음 DOM 요소가 촬영을 종료합니다 : :이 스타일이 경우에 따라서

{ margin:5px; padding:3px; background:green; position:relative; } 

마진 : 특이성, 다른 스타일의 모든 충돌이 없기 때문에 적용되기 때문에 5px 밖으로 이긴다.