CSS ID 선택기

[소개] id 선택기 id 선택기는 특정 ID로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. ID 선택기는 " "로 정의됩니다. 다음 두 개의 ID 선택기 중 첫 번째는 요소의 색상을 빨간색으로 정의할 수 있고 두 번째는 요소의 색상을 녹색으로 정의할 수 있습니다. red {color:re

id selector

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

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

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

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

다음 HTML 코드에서 id 속성이 red인 p 요소는 빨간색으로 표시되고, id가 있는 p 요소는 빨간색으로 표시됩니다. 속성 녹색은 녹색으로 표시됩니다.

이 단락은 빨간색으로 표시되어 있습니다.

이 문단은 녹색입니다.

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

id 선택자 및 파생 선택자

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

#sidebar p {
글꼴 스타일: 기울임꼴;
텍스트 정렬: 오른쪽;
여백 상단: 0.5em;
}

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

하나의 선택기, 여러 용도

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

#sidebar p {
글꼴 스타일: 기울임꼴;
텍스트 정렬: 오른쪽;
여백 상단: 0.5em;
}

#sidebar h2 {
글꼴 크기: 1em;
글꼴 두께: 일반;
글꼴 스타일: 기울임꼴;
여백: 0;
줄 높이: 1.5;
text- align: right;
}

여기서 페이지의 다른 p 요소와 확연히 다른 점은 사이드바 내부의 p 요소가 동시에 특별하게 처리되었다는 것입니다. 페이지의 다른 p 요소와는 다릅니다. 다른 모든 h2 요소와 달리 사이드바의 h2 요소도 다른 특별 처리를 받습니다.

별도 선택기

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

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

이 규칙에 따라 ID가 사이드바인 요소는 픽셀 너비의 검은색 점선 테두리를 갖게 되며 동시에 10픽셀의 패딩(내부 공백)으로 둘러싸여 있습니다. 이전 버전의 Windows/IE 브라우저에서는 이 선택기가 속한 요소를 구체적으로 정의하지 않는 한 이 규칙을 무시할 수 있습니다.

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

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