일반적인 CSS 속성 선택기 사용에 능숙

일반적인 CSS 속성 선택기를 익히려면 특정 코드 예제가 필요합니다.

CSS는 웹 페이지의 스타일을 제어하는 ​​데 사용되는 언어입니다. HTML 요소에 스타일과 레이아웃을 추가할 수 있습니다. CSS에서 속성 선택자는 속성 값에 따라 해당 요소를 선택하여 스타일을 쉽게 수정할 수 있는 매우 유용한 선택자입니다.

다음은 일반적으로 사용되는 CSS 속성 선택자를 소개하고 구체적인 코드 예제를 제공합니다.

1. 선택기 [유형]: 유형 속성을 기준으로 요소를 선택합니다.

다음 CSS 코드를 작성하여 "버튼" 유형의 모든 버튼 요소의 배경색을 빨간색으로 설정하세요.

button[type="button"] {
  background-color: red;
}

2. Selector [class]: 클래스 속성을 기준으로 요소를 선택합니다.

클래스가 "highlight"인 모든 요소의 텍스트 색상을 파란색으로 설정하려면 다음 CSS 코드를 작성하세요.

.highlight {
  color: blue;
}

3. Selector [id]: id 속성을 기준으로 요소를 선택합니다.

ID가 "navbar"인 탐색 모음 요소의 배경색을 회색으로 설정하려면 다음 CSS 코드를 작성하세요.

#navbar {
  background-color: gray;
}

4. Selector [attr~=value]: 지정된 속성과 속성 값을 가진 요소를 선택합니다. 특정 어휘 요소가 포함되어 있습니다.

속성이 "lang"이고 속성 값에 "en"이 포함된 요소의 텍스트 색상을 녹색으로 설정하려면 다음 CSS 코드를 작성하세요.

[lang~="en"] {
  color: green;
}

5. Selector [attr^=value]: 지정된 속성이 있는 요소를 선택합니다. 속성 값이 특정 값으로 시작하는 요소.

"data-" 속성이 있고 속성 값이 "menu"로 시작하는 요소에 대해 글꼴 스타일을 기울임꼴로 설정하려면 다음 CSS 코드를 작성하세요.

[data^="menu"] {
  font-style: italic;
}

6. Selector [attr$=value]: 요소를 선택합니다. 지정된 속성 속성 값이 특정 값으로 끝나는 요소입니다.

다음 CSS 코드를 작성하여 속성이 "href"이고 속성 값이 ".pdf"로 끝나는 링크 요소의 텍스트 색상을 빨간색으로 설정합니다.

[href$=".pdf"] {
  color: red;
}

일반적으로 사용되는 빠르고 정확한 CSS 속성 선택기입니다. 지정된 요소를 선택하고 해당 스타일을 수정합니다. 이러한 선택기를 유연하게 사용하면 웹페이지 스타일을 더 쉽게 제어할 수 있습니다.

위 내용이 CSS 속성 선택기 사용을 더 잘 이해하고 익히는 데 도움이 되기를 바랍니다. CSS를 사용하면 더 나은 결과를 얻을 수 있기를 바랍니다!

위 내용은 일반적인 CSS 속성 선택기 사용에 능숙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!