동일한 요소에 대한 CSS 파일의 두 요소 선택기가 어떻게 처리됩니까?

Question

파트 A :
이 예제에서 각 주요 브라우저에 대한 결과는 어떻게 될 것으로 예상됩니까? 다음 파일이 하나의 파일에 포함되어 있다고 가정합니다.

p { 
     border:1px solid black 
    } 

.... further down the same css ..... 

p { /* repeated element selector */ 
    font-size:20px 
    } 

파트 B는 :
결과의이 내가 개발자는 스타일 시트를 작성하는 것이 일반적이다 수년에 걸쳐 발견했습니다

외부 스타일 시트 대 <style> 경우 변경 예정 너무 많은 셀렉터가 있기 때문에 셀렉터는 다양한 스타일로 반복되어 반복되는 경우가 많습니다.

Answer 1

스타일 시트에서 동일한 요소를 두 번 이상 지정하는 것이 일반적입니다. 하나의 스타일 시트에 기본 스타일이 있고 다른 스타일 시트에 테마 스타일이있는 CMS가있는 경우 디자인의 다른 측면을 다룰 수있는 별도의 스타일 시트가있는 경우 매우 일반적입니다.

사이트가 서버로드를 절약하기 위해 모든 스타일 시트를 하나의 파일로 병합하는 것이 일반적입니다.

위의 두 가지를 모두 감안할 때 단일 스타일 시트가 동일한 태그, 클래스 또는 ID에 대한 다중 참조를 갖는 것이 일반적입니다.

좋은 소식은 정말로 중요하지 않다는 것입니다. 동일한 것을 두 번 이상 지정하면 CSS는 병합 된 것처럼 처리합니다. 두 선언에서 모두 똑같은 스타일을 사용하면 후자의 스타일이 이전 스타일보다 우선 적용됩니다. 이것은 테마 스타일이 CMS의 기본 스타일보다 우선하도록 허용하는 것입니다.

유일한 예외는 !important 마커를 사용하는 경우입니다. 이렇게하면 중요한 것으로 표시된 항목은 다른 항목을 무시하게됩니다.

질문의 파트 B : 아니오, 그들은 동일합니다.외부 CSS 파일을 통해로드 된 스타일과 기본 HTML 페이지에서 인라인으로로드 된 스타일 간에는 차이가 없습니다.

외부 CSS 파일을 통해로드하는 것이 일반적으로 바람직합니다. HTML 페이지와 별도로 브라우저에서 캐시 할 수 있기 때문에 사용자가 여러 페이지를 방문 할 때 서버에 대한 작업이 줄어들 기 때문에 일반적으로 좋습니다. 대지.

Answer 2

파트 A : p에는 테두리와 글꼴 크기가 모두 설정됩니다. 당신이 그런 식으로 규칙을 적용 할 경우이 방법을 수행 같다 :

p{ 
    border:1px solid black; 
    font-size:20px; 
} 

문제는 다음과 같은 CSS 조각에 관하여 :

여기

p{ 
    border:1px solid black; 
} 
... 
p{ 
    border:10px solid black; 
} 

은, 국경 무시됩니다! "! 중요!"! :;

파트 B 1 픽셀의 검은 색 중요 : 전혀

당신은 당신이 사용해야 "원래"1 픽셀의 경계 (첫 번째 경계 규칙에 적용 CSS2 규칙을 즉 국경을 유지하려는 경우

Answer 3

결과는 다음과 같습니다 나중에 같은 선택에 대해 동일한 CSS 속성을 정의하는 경우, 다음 거 오버라이드 (override) 할 수

p { 
border:1px solid black; 
font-size:20px; 
}

, 예를 들면 :

p { 
     border:1px solid black 
     font-size: 12px; 
    } 

.... further down the same css ..... 

p { /* repeated element selector */ 
    font-size:20px 
    } 

될 것 :

p { 
border:1px solid black; 
font-size:20px; 
}

편집 : B : 차이는 없습니다.