CSS 클래스 및 ID 선택기를 사용하는 방법

CSS에서 클래스 선택자는 마침표로 표시되는 지정된 클래스(class)를 가진 요소를 선택하는 데 사용되며 구문은 ".specified class {style attribute: style attribute value;}"입니다. id 선택자는 특정 id가 표시된 html 요소에 대해 특정 스타일을 지정하는 데 사용되며 "#"을 사용하여 정의되며 구문은 "#특정 id 값{특정 속성: 특정 속성 값;}"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 클래스 및 ID 선택기 사용 방법

Class 선택기

.class 선택기는 지정된 클래스(class)가 있는 요소를 선택합니다.

CSS에서는 클래스 선택기가 마침표와 함께 표시됩니다.

.center {text-align: center}

위 예에서 중앙 클래스가 있는 모든 HTML 요소는 중앙에 배치됩니다.

아래 HTML 코드에서 h1과 p 요소 모두 중앙 클래스를 갖습니다. 이는 둘 다 ".center" 선택기의 규칙을 준수한다는 것을 의미합니다.

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

참고: 클래스 이름의 첫 번째 문자로 숫자를 사용할 수 없습니다! Mozilla나 Firefox에서는 작동하지 않습니다.

id와 마찬가지로 클래스도 파생 선택기로 사용할 수 있습니다.

.fancy td {
color: #f60;
background: #666;
}

위의 예에서 클래스 이름이 fancy인 더 큰 요소 내부의 테이블 셀은 회색 배경에 주황색 텍스트를 표시합니다. (fancy라는 이름의 더 큰 요소는 테이블이나 div일 수 있습니다.)

요소는 클래스에 따라 선택할 수도 있습니다.

td.fancy {
color: #f60;
background: #666;
}

위 예에서 클래스 이름이 fancy인 테이블 셀은 회색 배경의 주황색입니다.

<td class="fancy">

테이블 요소에 원하는 만큼 클래스 팬시를 할당할 수 있습니다. fancy로 표시된 셀은 회색 배경의 주황색입니다. fancy라는 클래스가 할당되지 않은 셀은 이 규칙의 영향을 받지 않습니다. 클래스 팬시가 있는 단락은 회색 배경의 주황색이 아니며 물론 팬시로 표시된 다른 요소는 이 규칙의 영향을 받지 않는다는 점도 주목할 가치가 있습니다. 이는 모두 우리가 이 규칙을 작성한 방식 때문이며, 효과는 fancy로 표시된 테이블 셀로 제한됩니다(예: fancy 클래스를 선택하기 위해 td 요소 사용).

id 선택기

id 선택기는 특정 ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다.

id 선택자는 "#"으로 정의됩니다.

아래 두 개의 ID 선택기의 경우 첫 번째 선택기는 요소의 색상을 빨간색으로 정의할 수 있고 두 번째 선택기는 요소의 색상을 녹색으로 정의할 수 있습니다.

#red {color:red;}
#green {color:green;}

아래 HTML 코드에서 p 요소는 red의 id 속성은 red로 표시되고, id 속성이 green인 p 요소는 녹색으로 표시됩니다.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

참고: id 속성은 각 HTML 문서에 한 번만 나타날 수 있습니다. 이유를 알아보려면 XHTML: 웹사이트 리팩토링을 참조하세요.

id 선택기와 파생 선택기

현대 레이아웃에서는 id 선택기가 파생 선택기를 만드는 데 자주 사용됩니다.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

위 스타일은 ID가 사이드바인 요소 내에 나타나는 단락에만 적용됩니다. 이 요소는 div 또는 테이블 셀일 가능성이 높지만 테이블 또는 기타 블록 수준 요소일 수도 있습니다. 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 또는 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114과 같은 인라인 요소일 수도 있지만 이러한 사용은 인라인 요소 45a2772a6b6107b401db3c9b82c049c2 내에서 사용할 수 없기 때문에 불법입니다. ;p>(이유를 잊어버린 경우 XHTML: 웹사이트 리팩토링 참조)

하나의 선택기, 여러 용도

사이드바로 표시된 요소가 문서에 한 번만 나타날 수 있더라도 이 ID 선택기는 파생 선택기로 여러 번 사용될 수 있습니다.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

여기와 페이지에서 확실히 다른 점 다른 p 요소와 비교하여 사이드바 내부의 p 요소는 특별하게 처리된다는 점과 동시에 페이지의 다른 모든 h2 요소와 분명히 다른 점은 사이드바 내부의 h2 요소도 다른 특별 처리를 받는다는 것입니다.

별도의 선택기

ID 선택기는 파생 선택기를 만드는 데 사용되지 않더라도 독립적으로 작동할 수 있습니다.

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

이 규칙에 따르면 ID 사이드바가 있는 요소에는 1픽셀 너비의 검은 점이 표시됩니다. 테두리 10픽셀의 패딩으로 둘러싸여 있습니다. 이전 버전의 Windows/IE 브라우저에서는 이 선택기가 속한 요소를 구체적으로 정의하지 않는 한 이 규칙을 무시할 수 있습니다.

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

(동영상 공유 학습: css 동영상 튜토리얼, html 동영상 튜토리얼)

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