.logo {} /* class="logo" 인 요소를 선택 */

.gnb .logo {}        /* .gnb 안에 있는 모든 .logo (후손) */
.gnb > .logo {}      /* .gnb 바로 아래에 있는 .logo (직계 자식) */
.gnb > div.logo {}   /* .gnb 아래 div.logo */

.logo + .btn {}      /* .logo 바로 뒤에 오는 형제 .btn */
.logo ~ .btn {}      /* .logo 뒤에 오는 모든 형제 .btn */

div.logo {}           /* div이면서 클래스가 logo */
.gnb.logo {}          /* gnb와 logo 클래스를 둘 다 가진 요소 */
.gnb .logo.btn {}     /* .gnb 내부의 .logo.btn */

[class="logo"] {}       /* 정확히 class="logo" */
[class~="logo"] {}      /* 공백 기준으로 logo 포함 */
[class^="logo"] {}      /* logo로 시작 */
[class$="logo"] {}      /* logo로 끝남 */
[class*="logo"] {}      /* logo를 포함 */

.logo:hover {}          /* 마우스를 올렸을 때 */
.logo:active {}         /* 클릭하고 있을 때 */
.logo:focus {}          /* 포커스 상태일 때 */
.logo:first-child {}    /* 부모의 첫 자식 */
.logo:last-child {}     /* 부모의 마지막 자식 */
.logo:nth-child(2) {}   /* 두 번째 자식 */
.logo:not(.main) {}     /* .main 클래스가 아닌 .logo */

이정도만 알아도 css 선택자 부분은 거의 다 대응 가능합니다.