CSS 선택기를 사용하는 올바른 방법

CSS 선택기를 올바르게 사용하는 방법

CSS(Cascading Style Sheets) 선택기는 HTML 요소에 스타일을 선택하고 적용하는 중요한 도구입니다. CSS 선택기를 적절하게 사용하면 웹 페이지 스타일을 더욱 정확하고 유연하게 만들 수 있습니다. 다음은 CSS 선택기를 올바르게 사용하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다.

1. 기본 선택기

1. 요소 선택기: HTML 요소의 태그 이름을 선택하여 스타일을 적용합니다. 예를 들어, 모든 단락(p) 요소에 대해 글꼴 색상을 빨간색으로 설정하려면:

p {
  color: red;
}

2. 클래스 선택기: HTML 요소의 클래스 이름을 선택하여 스타일을 적용합니다. 클래스 선택자는 마침표(.)로 시작하고 그 뒤에 클래스 이름이 옵니다. 예를 들어 클래스 이름이 "intro"인 모든 요소에 대해 배경색을 노란색으로 설정하려면:

.intro {
  background-color: yellow;
}

3. ID 선택기: HTML 요소의 ID를 선택하여 스타일을 적용합니다. ID 선택기는 파운드 기호(#)로 시작하고 그 뒤에 ID 이름이 옵니다. 예를 들어, ID 이름이 "logo"인 요소의 너비를 200픽셀로 설정하려면:

#logo {
  width: 200px;
}

2. 조합 선택기

1. 하위 선택기: 요소의 하위 요소를 선택하여 스타일을 적용합니다. 하위 선택기는 보다 큼 기호(>)를 사용합니다. 예를 들어, 기사 요소 아래의 모든 p 요소에 대해 글꼴 크기를 14픽셀로 설정하려면:

article > p {
  font-size: 14px;
}

2. 하위 선택기: 요소의 하위 요소를 선택하여 스타일을 적용합니다. 하위 선택자는 공백을 사용합니다. 예를 들어, 상위 요소 클래스 "섹션" 아래의 모든 p 요소에 대해 글꼴 색상을 녹색으로 설정하려면:

.section p {
  color: green;
}

3. 인접 형제 선택기: 요소 스타일에 인접한 형제 요소를 선택하여 적용됩니다. 인접 형제 선택자는 더하기 기호(+)를 사용합니다. 예를 들어, ID "header" 뒤에 나타나는 모든 p 요소에 대해 굵은 글꼴을 설정하려면:

#header + p {
  font-weight: bold;
}

4. 일반 형제 선택기: 요소의 형제인 모든 요소를 ​​선택하여 스타일을 적용합니다. 범용 형제 선택기는 물결표(~)를 사용합니다. 예를 들어, ID가 "사이드바"인 뒤에 나타나는 모든 div 요소에 대해 테두리를 1픽셀 실선으로 설정하려면:

#sidebar ~ div {
  border: 1px solid;
}

3. 속성 선택기

1. [attribute] 속성 선택기: 지정된 요소를 선택하여 속성을 적용합니다. 예를 들어 href 속성이 있는 모든 요소에 대해 텍스트 장식 밑줄을 설정하려면:

a[href] {
  text-decoration: underline;
}

2. [attribute=value] 속성 선택기: 지정된 속성 및 속성 값이 있는 요소를 선택하여 스타일을 적용합니다. 예를 들어 대상 속성 값이 "_blank"인 모든 요소에 대해 글꼴 색상을 파란색으로 설정하려면:

a[target="_blank"] {
  color: blue;
}

3. [attribute^=value] 속성 선택기: 지정된 속성 값으로 시작하는 요소를 선택하여 스타일을 적용할 값 요소입니다. 예를 들어, href 속성 값이 "http"로 시작하는 모든 요소에 대해 글꼴 색상을 빨간색으로 설정하려면:

a[href^="http"] {
  color: red;
}

4. 의사 클래스 선택기

의사 클래스 선택기는 특정 상태나 위치를 선택할 수 있습니다. 요소. 일반적인 의사 클래스 선택기에는 hover, :active, :focus 등이 있으며 이는 마우스오버, 활성화, 포커스 등의 상태에 있는 요소를 선택하는 데 사용됩니다. 다음은 몇 가지 일반적인 의사 선택기 예입니다.

1. :hover 의사 선택기: 마우스가 요소 위에 있을 때 상태를 선택합니다. 예를 들어, 모든 링크에 대해 마우스 오버 시 색상을 변경하려면:

a:hover {
  color: purple;
}

2. :nth-child(n) 의사 클래스 선택기: 요소의 n번째 하위 요소를 선택합니다. 예를 들어, 목록의 짝수 행에 있는 요소의 배경색을 설정하려면:

li:nth-child(even) {
  background-color: lightgray;
}

위는 CSS 선택기의 몇 가지 기본 사용법과 예입니다. 독자가 CSS 선택기를 더 잘 이해하고 적용하여 정확하고 유연하게 사용할 수 있기를 바랍니다. 스타일을 제어하여 웹 디자인에 더 많은 가능성을 제공합니다.

위 내용은 CSS 선택기를 사용하는 올바른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!