[TIL] css 선택자
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 {스타일 규칙}
선택자1, 선택자2 {스타일 규칙}
두 요소의 스타일 규칙이 같을 경우 그룹 선택자(,)를 사용해 한꺼번에 정의할 수 있다.
CSS, 캐스케이딩 스타일 시트
CSS 에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다.
웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
-
스타일 우선순위 : 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선 순위에 따라 위에서 아래로 스타일을 적용한다.
-
스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
Author And Source
이 문제에 관하여([TIL] css 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jazzyfact95/TIL-css-선택자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)