아래 목록과 유사한 중첩 목록이 있습니다.
<ol>
<li>Item 1
<ol>
<li>Item 2</li>
<li>Item 3
<ol>
<li>Item 4
<ol>
<li>Item 5</li>
</ol>
</li>
<li>Item 6
<ol>
<li>Item 7</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
항목 1, 5 및 7은 모두 고독한 <li>요소입니다. 즉, 특정 상위 항목에 대한 계층 구조 수준에서 유일한 항목입니다. 그것들을 맞추고 총알 요소로 교환하고 싶습니다. (가능한 경우 순수한 CSS를 선호하지만 JavaScript 솔루션에도 개방적입니다.)
:only-child의사 클래스를 사용할 수 있다고 생각합니다 .
참조 참조 : http://www.w3.org/TR/css3-selectors/#only-child-pseudo
트릭에는 두 가지 CSS 규칙이 필요합니다.
이 ol li:only-child규칙은 상속으로 인해 문제를 일으킬 수 있습니다.
li:only-child *첫 번째 규칙의 효과를 취소하는 데 사용 합니다.
이 예제에서는 제대로 작동하는 것 같습니다.
ol li:only-child {
font-weight: bold;
}
li:only-child * {
font-weight: normal;
}<ol>
<li>Item 1
<ol>
<li>Item 2</li>
<li>Item 3
<ol>
<li>Item 4
<ol>
<li>Item 5</li>
</ol>
</li>
<li>Item 6
<ol>
<li>Item 7</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다