누군가가이 복잡한 CSS가 무엇을하는지 설명 할 수 있습니까

Question

.col-md-auto:first-child:nth-last-child(3), 
.col-md-auto:first-child:nth-last-child(3) ~ .col-md-auto { 
    width: 33.3333%; 
} 

나는 웹 사이트의 소스 코드에서이 CSS를 발견하고 실제적으로 무슨 일이 일어 났는지 짐작하기 위해 열심히 노력했습니다. 나는이 복잡한 CSS를 다루기 위해 복잡한 초보자입니다. . 나는 그 상징이 무엇을 상징의 의미를 얻을 수 있지만 여전히 전체 표현이 무엇을하는지 알아낼 수 없다는 것을 의미하는지 알아 내려고 w3 학교를 본다. 어떤 제안이 큰 도움이 될 것이다.

Answer 1

형제 자매, 스타일 그들에게 부모 컨테이너의 1/3 폭이 각각 클래스 = "COL-MD-자동"3 개 요소가 정확히이있는 경우.

4castle 설명에 따라 :

:nth-child()

: n 번째 - 아이 (AN은 + b)는 CSS 의사 클래스는 전에 + B-1 형제 자매가있는 요소를 일치 문서 트리에서 주어진 긍정 값이 이거나 n이 0입니다. 보다 간단하게 말해서 셀렉터는 형제 계열 의 숫자 위치가 패턴 +와 b와 일치하는 자식 요소의 숫자 과 일치합니다.

nth-last-child()

: n 번째 마지막 자식 (AN은 + b) CSS 의사 클래스에 대한 문서 트리에서 후 + B-1 형제를 갖는 엘리먼트와 일치 양수 또는 의 n 값은 0입니다.

General sibling selector ~

~ 연결자 두 개의 선택기를 분리하고 상기 제 선행하는 경우에만 상기 제 소자 일치 공통 부모를 공유하는 두.

.col-md-auto:first-child:nth-last-child(3), 
.col-md-auto:first-child:nth-last-child(3)~.col-md-auto { 
    width: 33.3333%; 
} 

.col-md-auto:first-child:nth-last-child(3)

---

는 제 1 선택이 필요한 이유는 제 1 아이 자체, 그건 .col-md-auto:first-child:nth-last-child(3)~.col-md-auto 첫번째 아이 다음 요소를 선택하는 동안, 첫 번째 요소를 선택하지만 하지. 당신은 nth test tool와

.col-md-auto:first-child:nth-last-child(3), 
 
.col-md-auto:first-child:nth-last-child(3)~.col-md-auto { 
 
    width: 33.3333%; 
 
} 
 

 
.row { 
 
    margin: 1em 0; 
 
} 
 

 
.row::after { 
 
    display: table; 
 
    content: " "; 
 
    clear: both; 
 
} 
 

 
.col-md-auto { 
 
    background-color: dodgerblue; 
 
    height: 5em; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.col-md-auto:nth-child(even) { 
 
    background-color: violet; 
 
}

<div class="row"> 
 
    <div class="col-md-auto"></div> 
 
    <div class="col-md-auto"></div> 
 
    <div class="col-md-auto"></div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-auto"></div> 
 
    <div class="col-md-auto"></div> 
 
    <div class="col-md-auto"></div> 
 
    <div class="col-md-auto"></div> 
 
</div>

Answer 2

을 재생할 수 있습니다. 또한 1 형제 자매가되는`클래스 = "COL-MD-자동"`3 개 요소, 스타일 그들에게 각각 정확히이있는 경우 초보자

Css Reference

Html Reference