CSS 선택기 속성 가이드: ID, 클래스 및 속성 선택기

CSS 선택기 속성 가이드: ID, 클래스 및 속성 선택기

CSS(Cascading Style Sheets)는 웹 페이지의 요소가 렌더링되고 배치되는 방식을 설명하는 데 사용되는 언어입니다. CSS에서 선택기는 특정 HTML 요소를 선택한 다음 스타일 규칙을 적용하는 데 사용됩니다.

이 문서에서는 세 가지 일반적인 선택기 속성인 ID, 클래스 및 속성 선택기에 중점을 두고 구체적인 코드 예제를 제공합니다.

1. id 선택기

id 선택기는 HTML에서 고유해야 하는 특정 ID 속성이 있는 요소를 선택하는 데 사용됩니다. CSS에서 ID 선택기의 구문은 선택기 이름 앞에 # 기호를 붙이는 것입니다. 예는 다음과 같습니다.

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

위 코드는 ID가 "header"인 div 요소를 나타내며 배경색은 파란색이고 텍스트 색상은 흰색입니다.

2. 클래스 선택기

클래스 선택기는 특정 클래스 속성을 가진 요소를 선택하는 데 사용됩니다. 요소는 여러 클래스 속성을 가질 수 있으며 여러 요소는 동일한 클래스 속성을 공유할 수 있습니다. CSS에서 클래스 선택기의 구문은 선택기 이름 앞에 . 기호를 추가하는 것입니다. 예는 다음과 같습니다.

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

위 코드는 "highlight" 클래스가 있는 p 요소를 나타냅니다. 배경색은 노란색이고 텍스트는 굵게 표시됩니다.

3. 속성 선택기

속성 선택기는 특정 속성을 가진 요소를 선택하는 데 사용되며, 속성 값을 기준으로 선택할 수 있습니다. CSS에서 속성 선택자의 구문은 다양한 형태로 제공됩니다. 다음은 몇 가지 예입니다.

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

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

위 코드는 href 속성이 있는 모든 요소를 ​​선택하고 텍스트 색상을 파란색으로 설정하는 것을 의미합니다.

• 특정 속성 및 속성 값을 가진 요소 선택:

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

위 코드는 유형 속성이 "text"인 모든 입력 요소를 선택하고 너비를 200px로 설정한다는 의미입니다.

• 특정 속성 값으로 시작하는 요소 선택:

<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

위 코드는 src 속성 값이 "images/"로 시작하는 모든 img 요소를 선택하고 회색 테두리를 추가한다는 의미입니다.

요약:

id, 클래스 및 속성 선택기를 사용하면 웹 페이지의 요소를 보다 정확하게 선택하고 특정 스타일을 적용할 수 있습니다. 실제 개발에서 이러한 선택기를 유연하게 사용하면 CSS의 재사용성과 유지 관리성이 향상될 수 있습니다.

위는 CSS 선택자 속성 가이드에 대한 간략한 소개와 해당 코드 예제를 제공합니다. 모든 사람이 CSS 선택자를 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS 선택기 속성 가이드: ID, 클래스 및 속성 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!