단일 CSS 파일 내의 규칙 순서가 중요합니까?

단일 CSS 파일 내의 규칙 순서가 달라졌습니까?단일 CSS 파일 내의 규칙 순서가 중요합니까?

<div id="wrapper> 
    <div id="a> 
     section a 
    </div> 
    <div id="b> 
     section b 
    </div> 
    <div id="c> 
     section c 
    </div> 
</div>

#c에 대한 div 규칙이 #a 및 #b보다 낮아야 할 필요가 있습니까? 아니면 분명히 : 둘 다 작동하지 않을 수 있습니까?

#wrapper { 
color: #CCC; 
} 

#c { 
clear:both 
} 

#a { 
float: right; 
} 

#b { 
float: left; 
}

출처

2009-10-21 Jeff

동일한 요소에 적용되는 동일한 규칙이 적용되는 경우 나중에 동일한 규칙이 적용됩니다.

당신은 스타일이있는 경우 :

.foo { color: red; } 
.bar { color: blue; }

그리고 마크 업 :

<div class="foo bar">Test</div>

가 그런 사업부의 텍스트가 파란색으로됩니다. 규칙의 순서를 바꾸면 빨간색이됩니다.

출처

2009-10-21 14:59:16

실제로 순서가 중요합니다.

는 부분적으로 인용하자면

http://msdn.microsoft.com/en-us/library/aa342531%28VS.85%29.aspx#specf를 참조하십시오 : 선택의 특이성에 의해

3. 정렬 : 일반적인 있습니다 높은 특이성 재정의 선택기와 선택기. 특이성은 (a) ID 속성의 수, (b) 클래스 및 의사 클래스 속성, (c) 유형 이름 및 의사 요소를 셀렉터에 연결하여 계산됩니다.

예를 들어, 다음 선택기 각각은 단일 LI 요소에 적용 할 수 있습니다. 그러나 가장 높은 특이성을 가진 선언 만 충돌이있을 경우 적용됩니다. 순서에 의해

*    {} /* a=0 b=0 c=0 -> specificity = 0 */ 
li   {} /* a=0 b=0 c=1 -> specificity = 1 */ 
ul li   {} /* a=0 b=0 c=2 -> specificity = 2 */ 
li:first-line {} /* a=0 b=0 c=2 -> specificity = 2 */ 
ul ol+li  {} /* a=0 b=0 c=3 -> specificity = 3 */ 
li.class  {} /* a=0 b=1 c=1 -> specificity = 11 */ 
li#id   {} /* a=1 b=0 c=1 -> specificity = 101 */

4.Sort
지정 : 이 경우 규칙은 같은 무게와 특이도가, 마지막 하나는 승리을 구문 분석. (@import 규칙으로 지정된 스타일 시트는 먼저 구문 분석됩니다.) 충돌이 있으면 스타일 시트의 뒷부분에 나타나는 셀렉터가 사용됩니다. 이러한 이유로 링크 의사 클래스 선택자는 항상 다음 순서로 사용해야합니다.

더 많은 예제와 함께 더 넓은 설명을 보려면 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/을 참조하십시오.

예제에 겹침이 없으므로 순서는 중요하지 않습니다. 반면에, 당신이 모순되는 스타일을 가지고 있다면, 체중, 특이성 및 질서가 적합 할 것입니다. 나는 당신의 질문에있는 예제가 오히려 단순화되어 있다고 가정합니다.

출처

2009-10-21 15:00:31

규칙이 동일한 요소의 동일한 속성에 적용되는 경우에만 순서가 중요합니다. (이 경우 마지막 규칙이 "승리"합니다.) 귀하의 예제에서 순서는 아무런 차이가 없습니다.

출처

2009-10-21 15:01:33 Martha

단일 CSS 파일 내의 규칙 순서가 중요합니까?

답변

관련 문제