특성 선택기의 특수성은 무엇입니까?

속성 선택 자의 특수성이 무엇인지 궁금합니다. 예를 들어특성 선택기의 특수성은 무엇입니까?

이드 = 100 포인트
클래스 = 10 점
HTML 태그 = 1 점

예 :이 HTML로

/* this specificity value is 100 + 10 + 1 = 111 */ 
#hello .class h2 { }

<div class="selectform"> 
<input type="text" value="inter text"> 
<input type="text" value="inter text" class="inputag"> 
</div>

두 개의 선택기 중 어느 것이 더 구체적입니까?

.selectform input[type="text"] { } 
.selectform .inputbg { }

점검http://tinkerbin.com/IaZW8jbI

출처

2012-07-10 Rohit Azad

특이점은 그것이 "포인트"라고 생각하는 방식으로 계산되지 않습니다. http://stackoverflow.com/questions/2809024/points-in-css-specificity – BoltClock

데모 확인 http://tinkerbin.com/ 특이도가 재미있는 –

당신은 설명 잡지 스매싱으로 [이 문서] (http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/)의 시작을 읽을 것 같아서 '#foo {}'는 1-0-0의 특이성을 가지므로'[id = "foo"] {}'는 동일한 요소를 선택하지만 * 1 *의 특이성은 * 많이 * 낮습니다. – stephenmurdoch

속성 선택기 클래스 선택기에 동일하게 특정 데모합니다. 이 두 번째 선택을 이길 원인 추가 유형 선택 input이 있기 때문에 당신의 예에서

은 첫 번째 선택은 더 구체적이다.

다음과 같이 각각의 셀렉터의 특이성 calculated이다

일반적

/* 1 class, 1 attribute, 1 type -> specificity = 0-2-1 */ 
.selectform input[type="text"] { } 

/* 2 classes     -> specificity = 0-2-0 */ 
.selectform .inputbg { }

출처

2012-07-10 05:13:25 BoltClock

를 작동하는 방법 IaZW8jbI는 – chharvey

@chharvey : 올바른 것 - CSS 자체에는 ID/클래스 선택자에서 특정 속성으로의 매핑이 없기 때문에 속성 선택자는 속성 이름과 상관없이 동일한 특이성을 갖기 때문입니다. 이 맵핑은 CSS 의미론이 아닌 문서 의미론에 따라 브라우저에 의해 수행됩니다. 속성과 클래스 선택자는 동일한 특이성을 공유합니다 (대부분 단순함을 유지할 가능성이 높습니다). – BoltClock

, 선택기의 모든 유형이 동일하다; 중요한 것은 표현식의 선택자 수입니다. 그래서 ID = 1, 두 개의 선택기가 동일한 특이성, 더 아래 CSS 파일 "승리"에있는 일을하는 경우의 클래스 = 1, 및 HTML 태그 = 1

. 따라서 CSS 참조를 일반에서 특정으로 순서대로 정렬하십시오. jquery-ui.css와 같은 라이브러리가 먼저 나오고 CSS 파일은 그 뒤를 쫓습니다.

출처

2012-07-10 05:23:06

그냥 추가 : 이들은 주로 "단순 선택자"로 알려져 있습니다. 선택기에서는 단순 선택자와 유사 요소 만이 결합자가 아니라 특이성을 고려합니다. 쉼표로 구분 된 그룹에서 특이성은 선택자 그룹의 각 부분에 대해 개별적으로 계산됩니다. – BoltClock

특성 선택기의 특수성은 무엇입니까?

답변

관련 문제