인접 형제 선택자는 li4개중에 aa 클래스가 하나 있고 그 다음에 위치에 있는 형제를 나타내주는 결합자이다.
예를 들어 내가 li태그에 orange라는 클래스를 선언해주고 그 밑에 li에 스타일을 선언해주고 싶으면
<head> <style> .orange + li{ color = red; } </head> <body> <ul> <li class="orange">오렌지</li> <li>사과 </li> </body> ...
그럼 li태그 안에 있는 사과의 글씨 색이 빨간색으로 나타난다
하지만 저 위의 선택자는 형제의 바로 아래에 있는 li의 형제만 바뀌게 되는데
밑에 li까지 바꾸고 싶다면
.orange ~li{ }
를 사용해주면 밑에 형제들까지 스타일이 적용이 되는 것을 볼 수 있다.
그룹 선택자는 짧게 말하면 말 그대로 선택자들을 그룹화 하여 한줄로 css를 적용할 수 있는데
h1태그 h2태그 h3태그를 같이 그룹화 하여 적용하고 싶으면
h1,h2,h2{ color: red; }
와 같이 사용할 수 있다.
다음은 nth-child 가상 클래스 선택자인데 부모 클래스 안에 있는 자식의 스타일을 변경 할 수 있다. 이 선택자로 홀수 번째만 변경 하거나 짝수 번째만 변경 첫번째, 마지막 번째만 변경할 수 있다.
 |  |
|---|
여기서
first-child는 첫번째 자식의 글씨 색상을 검정색이라 지정해도 바뀌지 않는 이유는
우선 순위가nth-child(odd)가 더 우위에 있기 때문이다 우선순위는 둘다id를 지정받아 순위가 같으면 더 아래에 있는 선택자가 더 우위를 갖게 된다. 따라서last-child는 노란색으로바뀌어 있고 홀수 번째 이자 우선순위가 더 높은nth-child(odd)로 인해빨간색으로 지정되는 것이다.
그럼 여기서 우선순위에 대해서 알아보자
우선순위 규칙
1.!important
2.인라인 스타일
3.아이디 선택
4.태그 선택
!important는 강제적으로 스타일 뒤에 지정해서 아무리 우선순위가 높은 경우라도 제일 1순위다.
그 뒤에 순위들은 이렇다고 보면 되는데 아까 nth-child에서 나왔듯이 순위가 똑같은 경우에는 더 아래에 있는 선택자가 더 우위를 갖게 된다.
button타입이나 input타입의 경우 style을 button[type="button"이나 `input[type="text"]으로 지정해주면 된다
 |  |
|---|
