메뉴 항목 사이에 구분선 추가 (가상 클래스 무시)

Question

a Concrete5 site의 메뉴 항목 사이에 구분선을 만들기 위해 각 메뉴 항목에 border-right를 추가 한 다음 : first- 자식 의사 클래스는 첫 번째 앞에 구분 기호를 추가합니다. 그러나 의사 클래스는 무시되고 각 메뉴 항목의 양쪽에 테두리가 추가됩니다. 여기에 코드입니다 :

.top-bar-section ul li > a { 
    display: block; 
    width: 100%; 
    color: white; 
    padding: 12px 0 12px 0; 
    padding-left: 15px; 
    font-size: 0.8125em; 
    font-weight: bold; 
    background: #0D42C0; 
    border-right: 1px solid white; 
} 
    .top-bar-section ul li > a:first-child { 
      border-left: 1px solid white; 
} 

나는 CMS에 의해 생산되고있는 HTML 메뉴의 정확한 구조를 모르는,하지만이 선택기 작동하는 것 같다. 이 문제를 해결하는 데 필요한 다른 것이 있는지 확실하지 않습니다. 이 문제를 진단하는 데 더 많은 정보가 필요한지 알려주십시오.

도움을 주신 분께 감사드립니다.

Answer 1

<a>은 모두 각각 <li>의 하위 항목입니다. 대신 첫 번째 <li>을 타겟팅해야합니다. 사용해보기 :

.top-bar-section ul li:first-child > a { 
     border-left: 1px solid white; 
} 

나중에 참조 할 수 있도록 질문에 HTML을 넣으십시오.