HTML CSS는 클래스를 포함하는 인접한 셀을 대상으로합니다.

Question

행과 셀이있는 테이블이 있으며 각 셀 내부에는 정렬되지 않은 목록이 있습니다.

일부 UL 태그 (표 TD 셀이 아님)에는 ul에 빨간색 테두리를 추가하는 클래스가 적용되어 있는데 이중 경계를 원하지 않으므로 왼쪽 첫 번째 셀을 제외하고 모든 인접 셀의 경계선을 제거하거나 첫 번째 셀의 오른쪽 경계선을 제거합니다.

ul.class가있는 인접 셀 행에 테두리가 추가되는 경우가 여러 개있을 수 있으며 그 사이에 ul 클래스가없는 다른 셀이있을 수 있습니다.

이것은 매우 복잡한 테이블의 간단한 예입니다, 나는 닫는 태그를 생략 한 : 나는 인접한 태그를 사용하여 시도

<tr> 
    <td> 
     <ul class="flag"> 
    <td> 
     <ul class="flag"> 
    <td> 
     <ul> 
    <td> 
     <ul> 
    <td> 
     <ul class="flag"> 
    <td> 
     <ul class="flag"> 

을하지만 작동하지 않습니다

ul.flag { 
    border: 1px 1px 1px 1px 
} 

ul.flag + ul.flag { 
    border: 1px 1px 1px 0 
} 

방법 특정 클래스의 태그가 포함 된 인접 셀을 타겟팅 할 수 있습니까?

Answer 1

첫 번째 설정된 경계

td ul.flag { 
    border: 1px solid red; 
} 

그런 다음

td:not(:first-child) ul.flag{ 
    border-left:0; 
}