동일한 경로로 변경하면 다른 결과를

이 HTML 보여준다 RED 링크동일한 경로로 변경하면 다른 결과를

<html> 
<head> 
<style> 
    #outter_div .span_class a {background: red;} 
    #inner_div span a {background: blue;} 
</style> 
</head> 
<body> 

<div id='outter_div'> 
<div id='inner_div'> 
    <span id='span_id' class='span_class'><a href='index.html'>link</a></span> 
</div> 
</div> 

</body> 
</html>

결과. 우리가

에 CSS의 첫 번째 라인을 변경하는 경우

는 그리고

#span_id a {background: red;}

링크 BLUE가된다.

그러나 #outter_div .span_class a과 #span_id a은 모두 같은 요소를 나타냅니다.

이 차이는 어디에서 발생합니까? 모든 것이 동일 할 때 왜 색이 바뀌는가?

출처

2011-11-12 Qiao

나는이 해결하기 위해 노력하고 있기 때문에 - 그래서 http://unraveled.com/publications/assets/css_tabs/index.html을, 선택한 탭은 본문 ID가 아니라 탭 ID로 정의됩니다. – Qiao

CSS 선택기의 특정 가중치를 수학적으로 계산하는 방법을 알고 있습니까?

알아보기 그래서 다시 질문

how to mathematically calculate the specific weight of your CSS selectors

#span_id a {background: red;}

1, 0,

#inner_div span a {background: blue;}

1 0 1

2 따라서, 링크는 청색이다.

그것은 전에 빨간색했다

#outter_div .span_class a {background: red;}

1, 1, 1

출처

2011-11-12 22:05:30 maxisam

차이점은 CSS Specificity입니다.

사용하는 특정 유형의 선택자 수에 따라 논리적으로 CSS 규칙을 우선 순위로 정렬 할 수있는 개념입니다. ID 선택자가 가장 명확하고 요소 선택자가 가장 적습니다.

예를 들어

, HTML 태그 <h1 id="one" class="one">...</h1>을 선택하는 두 개의 선택기 :

#one{ 
    color: red; 
} 
.one{ 
    color: blue; 
} 
h1{ 
    color: green; 
}

는 빨간색 나타납니다. #one 선택기를 제거하면 파란색이으로 표시되고 마지막으로 .one 선택기가 제거되면 녹색으로 표시됩니다.

출처

2011-11-12 21:55:52 Nightfirecat

동일한 경로로 변경하면 다른 결과를

답변

관련 문제