2017-10-03 13 views
2

위치에 따라 특정 리튬을 어떻게 공격 할 수 있는지 알아 내려고 노력했습니다. 본질적으로, 나는 NOT을 대상으로 첫 번째 자녀를 타겟팅 한 다음 3 시간마다 타겟팅합니다.사용 방법 : 첫 번째 아동용 + 3 대 이후 모두

예 :

여기
li1 (dont target) | li4(dont target) | li7 (dont target) 
li2 (target)  | li5 (target)  | li8 (target) 
li3 (target)  | li6 (target)  | li9 (target) 

내가 지금까지 시도했습니다 내용은 다음과 같습니다

.siteMapSubList.threecolumn > li:not(:nth-child(1n+3))

클래스 이름은 무관뿐만 아니라, 내가 구현하고있어 CSS 코드, 그래서 그것을 포함하지 않았다. 그러나 이것은 작동하지 않습니다. 에서와 마찬가지로 내가 타겟팅하려고하는 대상을 타겟팅하지 않습니다. 나는 정말로 내가 할 수 있다고 생각하는 2 가지 다른 규칙 (하나는 첫 번째 아이를 목표로 삼지 말고 다음에 3을 가짐)을 피하려고 노력하고있다. 그래서 나는 가능하다면 하나의 규칙에서 이것을 정말로하고 싶다.

편집

확실히 사람들이 내가 더 잘 필요가 무엇인지 이해 만들고 싶어. 그래서 본질적으로 우리가 9 개의 li을 가지고 있다면, 나는 1, 4, 7을 목표로 삼고 싶지 않습니다. 2,3,5,6,8,9를 목표로하고 싶습니다. (그래서 저는 not 연산자를 사용하고 있습니다. 그러나 더 좋은 방법, 나는 모두 귀이다).

답변

5

아주 가까이에! 필요한 셀렉터는 li:not(:nth-child(3n+1))입니다.

ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 6em; 
 
} 
 

 
li { 
 
    height: 2em; 
 
} 
 

 
li:not(:nth-child(3n+1)) { 
 
    color: red; 
 
}
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
</ul>

+1

YES :

아래의 예를 참조하십시오! 이것은 완벽합니다, 감사합니다! (시간이 나를 허락하면 아프다.) – jdmdevdotnet

+1

재미있는 사실 : n + 3은 질문에서와 같이 항목이 행이 아닌 열이있는 경우 실제로 더 가까이에있게된다. 그러면 선택자는 li이 될 것이다. not (: nth- 하위 (-n + 3))에 음수 부호가 붙습니다. 물론 이런 상황에서 레이아웃에 세심한주의를 기울이는 것이 도움이됩니다. – BoltClock