2014-10-24 4 views
0

내 UL에서 두 번째 자식을 대상으로해야합니다. 여기 내 html 코드이며 스타일은목표 ul의 두 번째 자식

HTML 적용 :

<ul class="latestpost"> 
    <li class="clearfix"> 
     <time datetime="2014-10-22T19:33">22<span class="month">Oct</span></time> 
     <h4><a href="#" rel="bookmark" title="Title</a></h4> 
     <div class="excerpt"> 
      sometxt... 
     </div> 
    </li> 

    /*I want to target bg of this li below, it is also li of the same ul as first li in my html */ 
    <li class="clearfix"> 
     <time datetime="2014-10-22T09:16">22<span class="month">Oct</span></time> 
     <h4><a href="#" rel="bookmark" title="Permanent Link to title</a></h4> 
     <div class="excerpt"> 
      sometxt... 
     </div> 
    </li> 
</ul> 

CSS : 지금 몇 시간 동안 고군분투

.latestpost li time { 
     background:#d5176f;  
     border-right: 1px solid #d5176f; 
     border-bottom: 1px solid #d5176f; 
     color:#fff; 
} 
ul.latestpost li time:nth-child(2) { 
     background:red !important;  
     border-right: 1px solid #d5176f; 
     border-bottom: 1px solid #d5176f; 
     color:#fff !important; 
} 

을,하지만 난 그게 간단한 수정 알고있다. 모든 조언을 환영합니다

감사합니다 !!!

+1

다음과 같이해야합니다 생각합니다. 또한, 당신이하려는 일을 정확히 명확히 할 수 있습니까? javascript로 li 태그를 선택하려고합니까? –

+0

': nth-child (even)'과': nth-child (odd)'를 사용하여 주목해야 할 것은 중요하고 덜 반복적 인 코드를 사용할 필요를 없애줍니다 ... –

답변

5

두 번째 <time> 요소가 아니지만 두 번째 <li> 요소입니다.

.latestpost li time { 
    ... 
} 
.latestpost li:nth-child(2) time { 
    ... 
} 

(!) 참고 : 그래서,이 규칙 사용의 두 번째 아이를 대상으로 지정하려면 고정하십시오이 깨진 태그

0

당신의 ul 다음을 사용 :

ul.latestpost li:nth-child(2) { 

} 

하지만를 현재보고 CSS 다음으로 time을 두 번째로 타겟팅하고 싶습니다. :

ul.latestpost li:nth-child(2) time { 

} 
0

선택자가 잘못되었다고 생각합니다. 현재 li에있는 두 번째 time 요소를 찾고 있습니다. li 요소에는 각각 time 요소가 하나만 있기 때문에 스타일을 적용 할 항목이 없습니다. 당신이 당신의 예에서 2 time 요소를 선택하려는 경우 나는 당신의 선택이 더 읽을 수 있도록 마크 업을 포맷하십시오

ul.latestpost li:nth-child(2) time { ... } 
관련 문제