CSS 의사 클래스 선택기

选择CSS 의사 선택 장치

/*요소 선택기*/

Ul {

padding: 0;

Margin: 0;

width: 450px;

패딩 : 10px 5px;

}

ul:after { /*하위 블록이 상위 블록을 엽니다*/

content:'' /*하위 요소 끝에 빈 콘텐츠 요소 추가*/

display: block ; /*블록 수준 표시로 설정*/

clear:both; /*양쪽의 부동소수점 지우기*/

/*visibility: none !*숨김도 괜찮습니다*!*/

/*height: 0 ;*/

/*_height: 1%; !*IE의 경우*!*/}

li { list-style: none; /*기본 목록 항목 스타일 제거*/

float: left; /*왼쪽 float */

width: 40px; /*너비 설정*/

height: 40px; /*높이 설정*/

line-height: 40px; */

text-align: center; / *텍스트는 수평 중앙에 위치함*/

border-radius: 50%; /*테두리 둥근 모서리 설정*/

ground: /*배경색 하늘색*/

margin-right: 5px; /*각 공 사이의 오른쪽 여백 */}

/*:before: 지정된 선택기 앞에 삽입, 기본값은 인라인 요소입니다*/

ul:before {/*텍스트 삽입* /content: 'PHP 중국어 웹사이트';

/*블록 요소로 변환*/ display: block; }

ul:before {/*블록 요소로 변환*/display: block

/*content: url( ../html/images/5.jpg) ;*/

/*content: ''; */

/*이미지가 배경으로 설정된 경우에만 크기를 설정할 수 있습니다*/

/*배경 -이미지: url(../html/images/5.jpg );*/

/*배경 크기:100px 100px;*/

/*높이: 100px */

/*너비: 100px; */}

/*:after: 지정된 요소 뒤에 요소를 추가합니다. 기본값은 인라인 요소이며 텍스트, 이미지 또는 비디오일 수도 있습니다.*/

ul:after {/*content:'www.php. cn';*/

/*color:red;*/}

/*:first-child: 상위 요소에서 첫 번째 하위 요소를 선택합니다*/

/*참고: ul 요소는 하나만 있습니다. 현재 페이지이므로 상위 ul을 생략할 수 있습니다*/

ul li:first- child {

background-color: brown;}

/*:last-child: 상위 요소의 첫 번째 하위 요소 선택*/

ul li:last-child {

background-color: lightgreen;}

/*:only-child: 현재 상위 요소의 유일한 하위 요소인 요소를 선택합니다. */

p:only-child {

/*두 div 중 첫 번째 div만 포함됩니다.

하위 요소는 하나만 있으며 첫 번째 div의

/*color:red;*/}

/*only-of-type: 상위 요소 선택 only-child 아래의 유일한

요소는 하위 유형을 지정한다는 점에서 only-child와 다릅니다. 요소(태그 이름)*/

p:only-of-type {

/*먼저 위의 only를 교체합니다. 실행 후 세 번째 div의 p도 선택되는 것을 볼 수 있습니다. p 유형이 지정된 유일한 하위 요소 */

color:red;}

only-child 및 only-of -type의 차이점:

1 공통점: 둘 다 상위 요소에서 유일한 하위 요소를 선택합니다.

2. 차이점: only-child는 하위 요소의 유형을 제한하지 않습니다. only-of-type: 하위 요소를 제한합니다. 예를 들어 p 태그여야 합니다.

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