선택기 범위를 변경하지 않고 CSS 선택기의 클래스 수준 특이성을 높이는 가장 쉬운 방법

Question

현재 Nicole Sullivan's OOCSS grids module의 변형을 직시 자손의 레이아웃을 결정하는 데 단일 컨테이너 클래스 만 필요합니다. 나는 이것이 CSS3를 지원하는 브라우저에서만 작동한다는 경고가 있음을 알고있다. 여기

차이의 예 :

바닐라 OOCSS grids 규칙 :

.unit1of4 { 
    width: 25%; 
} 

내 reduced grids 규칙 : 또 다른 중요한주의가 요소의 분수의 크기가 결정된다는 가정이

.line > :nth-child(1):nth-last-child(4), 
.line > :nth-child(2):nth-last-child(3), 
.line > :nth-child(3):nth-last-child(2) { 
    width:25%; 
} 

입니다 독점적으로 그 형제 수에 따라 -이 코드의 핵심 포인트인데 (leaner HTML을 사용하려면 외부에 명시 적으로 크기가 명시된 경우), 너비가 불균형 해지려고하는 예외가있을 수 있습니다.

내 선택기의 특수성으로 인해 OOCSS 모듈을 다시 붙일 수는 없습니다. 즉, HTML에서 unitXofY 클래스를 지정하면 구체적으로 기본 가정을 대체 할 수 있지만 실제로는 셀렉터가 강해서 항상 지정된 클래스를 오버라이드 (override)합니다.

제가 찾고있는 것은의 실질적인 효과를 제한하지 않고이 선택자를 대체하는 가장 단순한 또는 가장 우아한 방법입니다. . 즉, 클래스가 아닌 선택된 요소에 대해 항상 올바른 것은 아니라는 가정을해서는 안됩니다.

Answer 1

가장 좋은 것은 :nth-child(n)입니다. 이는 중첩 된 분수의 항상 경우가 될 '어린이 요소'로 평이한 영어로 번역되는 의미없는 문장으로 해석된다는 점에서 다릅니다. 이를 구현하는 코드는 다음과 같습니다

.line > :nth-child(1):nth-last-child(4), 
.line > :nth-child(2):nth-last-child(3), 
.line > :nth-child(3):nth-last-child(2), 
.size1of4:nth-child(n):nth-child(n):nth-child(n) { 
    width:25%; 
} 

선택기는 트럼프 .size1of5에 적용되는 다음 규칙을 수도 있습니다 의미, 그것은 1 이전 선택기를 압도하도록 동안 3 번 지정됩니다. SASS 믹스 인으로

:

이것은 자세한 해킹이기 때문에, I've packaged it up as a SASS mixin :

@mixin increase-specificity($depth: 1) { 
    $sel : ''; 

    @while($depth > 0) { 
     $sel : $sel + ':nth-child(n)'; 
     $depth : $depth - 1; 
    } 

    &#{$sel} { 
     @content; 
    } 
} 

당신이 한 거기로, 특이도를 높이기 위해 원하는만큼 시간을 클래스 이름을 반복 할 수

Answer 2

.className의 반복 사이에는 공백이 없어 동일한 요소에 적용된다고 가정합니다. w3c spec에 따르면, "같은 단순한 선택의 반복 occurrances 허용와 특이도를 증가 할 수있다"그래서

당신은, 예를 들어, 사용 수 :

.size1of4.size1of4.size1of4.size1of4{/*some styles*/} 

... 그리고이 모든 요소에 적용됩니다 class 속성에 size1of4 만 있으면 3 개의 클래스 이름이나 의사 클래스로 선택자를 대체 할 수 있습니다.