CSS3에서 일반적으로 사용되는 선택자는 무엇입니까?

CSS3에는 HTML 요소를 선택하고 배치하기 위한 다양한 선택기가 있습니다. 다음은 일반적으로 사용되는 CSS3 선택자를 소개하고 해당 코드 예제를 제공합니다.

1. 요소 선택기:
   요소 선택기는 HTML 문서에서 요소를 선택하는 데 사용되는 가장 기본적이고 일반적으로 사용되는 선택기입니다. 다음은 요소 선택기를 사용하는 코드 예제입니다.

   p {
     color: red;
   }

   로그인 후 복사

   위 코드는 모든

   요소를 선택하고 해당 텍스트 색상을 빨간색으로 설정합니다.

2. 클래스 선택기:
   클래스 선택기는 동일한 클래스 이름을 가진 요소를 선택하는 데 사용됩니다. HTML 요소의 클래스 속성에 해당 클래스 이름을 추가하고 마침표 "."로 시작해야 합니다. 다음은 클래스 선택기를 사용하는 코드 예제입니다.

   .highlight {
     background-color: yellow;
   }

   로그인 후 복사

   위 코드는 클래스 이름이 "highlight"인 모든 요소를 ​​선택하고 배경색을 노란색으로 설정합니다.

3. ID 선택기:
   ID 선택기는 동일한 ID를 가진 요소를 선택하는 데 사용됩니다. HTML 요소의 id 속성에 해당 id를 추가하고 파운드 기호 "#"으로 시작해야 합니다. 다음은 ID 선택기를 사용하는 코드 예제입니다.

   #logo {
     width: 200px;
     height: 100px;
   }

   로그인 후 복사

   위 코드는 ID가 "logo"인 요소를 선택하고 너비를 200px로, 높이를 100px로 설정합니다.

4. 속성 선택기:
   속성 선택기는 특정 속성을 가진 요소를 선택하는 데 사용됩니다. 속성의 유무, 가치 등에 따라 선택할 수 있습니다. 다음은 몇 가지 일반적인 속성 선택기의 코드 예입니다.

   • 지정된 속성이 있는 요소 선택:

     input[type="text"] {
     border: 1px solid black;
     }

     로그인 후 복사

     위 코드는 유형 속성이 "text"인 모든 요소를 선택하고 해당 요소의 테두리를 변경하는 것을 의미합니다. 1px 검정색 실선.

   • 지정된 속성 값을 가진 특정 문자열을 시작, 종료 또는 포함하는 요소 선택:

     a[href^="https"] {
     color: blue;
     }

     로그인 후 복사

     위 코드는 "https"로 시작하는 href 속성 값이 있는 모든 요소를 선택하고 텍스트 색상을 설정한다는 의미입니다. 파란색으로.

5. 의사 클래스 선택기:
   의사 클래스 선택기는 요소의 특정 상태나 위치를 선택하는 데 사용됩니다. 다음은 일반적으로 사용되는 의사 클래스 선택기의 코드 예입니다.

   • 첫 번째 하위 요소 선택:

     ul li:first-child {
     font-weight: bold;
     }

     로그인 후 복사

     위 코드는 모든

     요소의 첫 번째
     • 하위 요소가 선택됨을 의미합니다. 글꼴은 굵게 표시됩니다.

     • 마우스 오버 요소 선택:

       a:hover {
       text-decoration: underline;
       }

       로그인 후 복사

       위 코드는 모든 마우스 오버 요소를 선택하고 해당 텍스트 아래에 밑줄을 추가합니다.

위 내용은 CSS3에서 일반적으로 사용되는 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!