CSS의 하위 셀렉터, 부모 항목과 하위 항목 만 타겟팅하는 방법

자식 선택자 둘레에서 내 음성을들을 수 없다는 것이 다소 당황 스럽습니다. 항목 목록에서 상위 목록 항목을 어떻게 타겟팅합니까? div#container > ul li{color: red;}을 시도했지만 전체 항목 목록의 색상이 변경되었지만 부모 항목의 색상을 변경하려고했습니다.CSS의 하위 셀렉터, 부모 항목과 하위 항목 만 타겟팅하는 방법

모든 부모 목록 항목에 빨간색을 지정하고 모든 하위 목록 항목에 파란색을 지정하고 싶습니다. 어떻게해야합니까?

div#container > ul > li{color: red;}

잘 모르겠어요하지만 당신은 여전히 자녀의 색상을 무시해야합니다 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
div#container > ul li{ 
    color: red; 

} 
</style> 
</head> 

<body> 
    <div id="container"> 
     <ul> 
      <li> Parent List Item 
       <ul> 
        <li> Child List Item </li> 
       </ul> 
      </li> 
      <li> Parent List Item </li> 
      <li> Parent List Item </li> 
      <li> Parent List Item </li> 
     </ul> 
    </div> 
</body> 
</html>

당신은

출처

2011-05-04 manraj82

에

div#container ul li ul li{ 
    color:black; 
}

DEMO

또는 사용 클래스 :

div#container ul li{ 
    color: red; 
} 
div#container ul li ul li{ 
    color: blue; 
}

또는 더 나은, UL 인증에 클래스를 지정 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
ul.parentList li{ 
    color: red; 
} 
ul.childList li{ 
    color: blue; 
} 
</style> 
</head> 

<body> 
    <div id="container"> 
     <ul class='parentList'> 
      <li> Parent List Item 
       <ul class='childList'>  
        <li> Child List Item </li> 
       </ul> 
      </li> 
      <li> Parent List Item </li> 
      <li> Parent List Item </li> 
      <li> Parent List Item </li> 
     </ul> 
    </div> 
</body> 
</html>

출처

2011-05-04 14:24:33 Yeodave

답변 주셔서 감사합니다. 이유는 내가 div # container의 직접 하위 인 ul의 목록 항목 만 대상으로 할 것이라고 생각했기 때문입니다. 내가 li 아이템의 직접적인 아이였던 ul에서 listitem의 색깔을 바꿀 때 나는 혼란스러워했다. 잘못된 것이 있다면 나를 정정해라. – manraj82

당신은 맞지만 아이는 그 설정을 상속 받는다. 상속을 중지 할 수 없으며 실제 값으로 만 상속 할 수 있습니다. – Yeodave

이 시도 감사드립니다.

div#container > ul > li > ul >li{color: black;}

출처

2011-05-04 14:19:37 Headshota

뭔가 잘못하고 있지 않는 한 죄송합니다. – manraj82

자녀 노드 색상을 무시해야합니다. – Headshota

div # container> ul> li {color : red;} 상위 항목의 경우.

div # 컨테이너> ul> li> ul> li {color : blue;} 하위 항목의 경우.

내가 시도

출처

2011-05-04 14:21:52

불구하고 몇 가지 클래스를 사용하는 것이 좋습니다 것이 :

div#container ul li { /*parent*/ 
    color: red; 
} 
div#container ul li ul li { /*children*/ 
    color: black; 
}

출처

2011-05-04 14:22:01 Neal

다시 검은 색으로 하위 항목을 설정? 내가 할 것 ul

DEMO

출처

2011-05-04 14:22:30 anothershrubery

5 년 된 답변을 거절하고, 이유를 떠나지 않아 ... 환호성 친구. – anothershrubery

#container li{ color: black; } /* Default <li> style */ 

#container > ul > li{ color: red; }

출처

2011-05-04 14:25:05 Didaxis

당신은 그것을 할 수있는 다음과 같은 방식으로 클래스를 추가하지 않고

첫 번째 만에 붉은 색을 설정 학부모

div#container > ul > li 
{ 
color: red; 
}

이 선택기에는 lef 오른쪽에서 오른쪽으로 : id 값이 container 인 div의 자식 인 ul의 자식 인 li을 선택하고 색상을 빨간색으로 설정합니다. 이 시점에서 모든 것이 빨간색으로 변경되었음을 알 수 있습니다. 그 이유는 빨강의 색을 부모 li로 설정하면 자식 ul 및 li이 색을 상속하므로 자식 색도 빨간색이됩니다. 따라서 다음과 같이이를 오버라이드해야합니다.

div#container > ul > li > ul > li 
{ 
color: blue; 
}

이 선택은 왼쪽에서 오른쪽으로 읽는 말한다 : ID의 속성을 가지고 사업부의 아이는 UL의 자식 인 리튬의 자식 인 UL의 자식 인 리튬을 선택 컨테이너의 값으로 설정하고 색상을 파란색으로 설정합니다. 이것은 상속을 무시합니다.

출처

2011-05-04 15:01:35 Jawad

CSS의 하위 셀렉터, 부모 항목과 하위 항목 만 타겟팅하는 방법

답변

관련 문제