1. 전체 선택자

universal selector

* { }

문서의 모든 요소에 적용할 때 사용한다.

웹브라우저의 기본 스타일을 초기화 할 때 자주 사용되며,

margin, padding의 여백을 0으로 초기화 하거나

boxsizing 같은 속성을 일괄적으로 초기화 해준다.

2. 타입 선택자

type seletor

태그명 {}
ex) p {font-size : 5px;}

특정 태그를 사용한 모든 요소에 스타일을 적용한다.

타입선택자는 태그 이름을 선택자로 사용하므로 태그 선택자라고도 하고,
스타일을 적용하는 대상이 요소(element)이므로 요소 선택자(element selector)라고도 한다.

3. 클래스 선택자

.클래스명 {}

특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용한다.

두 개 이상의 클래스 스타일을 적용하고 싶을 경우,

class="class-one class-two" 와 같은 형태로 공백을 이용하여 지정한다.

4. id 선택자

#아이디명 {}

클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면,

id 선택자는 문서에서 한 번만 적용할 수 있다.

5. 그룹 선택자

선택자1, 선택자2 {스타일 규칙}

두 요소의 스타일 규칙이 같을 경우 그룹 선택자(,)를 사용해 한꺼번에 정의할 수 있다.

CSS, 캐스케이딩 스타일 시트

CSS 에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다.

웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

• 스타일 우선순위 : 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선 순위에 따라 위에서 아래로 스타일을 적용한다.

• 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.