CSS의 여러 선택기

CSS(Cascading Style Sheets)는 HTML 및 XML 파일의 스타일과 레이아웃을 제어하는 ​​데 사용되는 스타일 언어입니다. CSS에서 선택기는 HTML 요소를 선택하는 데 사용되는 패턴을 나타냅니다. 선택기는 CSS의 가장 기본적인 구성 요소 중 하나이며, 웹 페이지를 아름답게 만들고 최적화하기 위해 다양한 요소에 다양한 스타일을 적용할 수 있습니다.

CSS에는 다양한 유형의 선택기가 있으며 각각 기능과 적용 시나리오가 다릅니다. 이 글에서는 독자들이 CSS의 기본을 더 잘 익힐 수 있도록 몇 가지 일반적인 CSS 선택자를 소개합니다.

1. 태그 선택기

태그 선택기는 HTML 요소의 이름을 선택기로 선택하는 것을 의미합니다. 예를 들어 모든 단락을 선택하려면 p를 선택기로 사용할 수 있습니다.

p {
  color: red;
  font-size: 16px;
}

위 코드는 HTML 요소의 글꼴 색상을 설정합니다. 모든 단락을 빨간색으로 바꾸고 글꼴 크기를 16픽셀로 설정합니다. 태그 선택기는 웹 페이지에서 동일한 유형의 모든 요소에 동일한 스타일을 적용해야 하는 상황에 적합합니다.

2. 클래스 선택기

클래스 선택기는 점(.)을 접두사로 사용하고 그 뒤에 지정된 클래스 이름을 선택기로 사용하는 것을 의미합니다. 예:

.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

위 코드는 "버튼" 클래스가 있는 모든 요소를 ​​선택합니다. 배경색을 파란색으로 설정, 글꼴 색상을 흰색으로 설정, 테두리를 둥근 모서리로 설정 등을 합니다. 클래스 선택자는 공통 스타일을 가진 요소 그룹을 지정하는 데 자주 사용됩니다.

3. ID 선택기

ID 선택기는 # 기호를 접두사로 사용하고 그 뒤에 지정된 ID 이름을 선택기로 사용합니다. 예:

#header {
  background-color: gray;
  color: white;
  height: 100px;
}

위 코드는 ID가 "헤더"인 요소의 배경색을 설정합니다. "를 회색으로 설정하고 글꼴 색상을 흰색으로 설정하고 요소 높이를 100픽셀로 설정합니다. HTML의 각 요소 ID는 고유하므로 ID 선택기는 특정 요소를 지정하는 데에만 사용할 수 있습니다.

4. 속성 선택기

속성 선택기는 대괄호로 묶인 속성 이름과 속성 값을 선택기로 사용하는 것을 의미합니다. 예:

a[href="https://www.google.com"] {
  color: blue;
  text-decoration: none;
}

위 코드는 모든 href 속성을 "https://www.google. com"에서는 하이퍼링크 요소의 색상을 파란색으로 설정하고 밑줄을 제거합니다. 속성 선택기를 사용하면 요소를 보다 정확하게 선택하고 요소의 속성 값을 기반으로 스타일을 정의할 수 있습니다.

5. 하위 선택자

하위 선택자란 요소 간의 계층 관계를 지정하여 선택하는 선택자를 말합니다. 예를 들어 div 요소 내에서 p 요소를 선택하려면 다음 코드를 사용할 수 있습니다.

div p {
  font-style: italic;
}

위 코드는 div 요소 내의 모든 p 요소를 기울임꼴로 설정합니다. 하위 선택자를 사용하여 중첩 구조 내의 특정 요소를 선택할 수도 있습니다.

6. 자식 선택자

자식 선택자란 조건에 맞는 직계 자식 요소를 모두 선택하는 선택자, 즉 "부모 요소 > 자식 요소"의 형식을 말합니다. 예를 들어, 클래스가 "menu"인 모든 div 요소에서 직계 하위 요소 ul을 선택하려면 다음 코드를 사용할 수 있습니다.

div.menu > ul {
  padding-left: 0;
}

위 코드는 클래스가 "인 모든 div 요소에서 직계 하위 요소 ul을 선택합니다." 메뉴" 왼쪽 패딩(padding-left)이 0으로 설정되어 있습니다. 하위 선택자는 하위 선택자와 기능이 유사하지만 직계 하위 요소에서만 작동합니다.

위는 CSS의 몇 가지 일반적인 선택기입니다. 다양한 선택기는 다양한 필요에 따라 다양한 요소 스타일을 선택하고 적용할 수 있습니다. 독자들이 이러한 선택자를 이해함으로써 CSS의 기본 지식을 더 잘 습득하여 아름답고 안정적인 웹 페이지를 작성할 수 있기를 바랍니다.

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