HTML5_html5 튜토리얼 기술의 새로운 CSS 선택기 및 의사 클래스 소개

선택기
p[name^="my"]{font-size:14px}
Selector^=는 이름 속성이 "my" p[로 시작하는 모든

요소 태그
에 규칙을 적용합니다. name$="my"]{font-size:14px}
Selector$=는 이름 속성이 "my"로 끝나는 모든

요소 태그에 규칙을 적용합니다.
p[name*= "my" ]{font-size:14px}
Selector$=는 이름 속성 끝에 "my"가 포함된 모든

요소에 규칙을 적용합니다.
Selector> 영향을 받는 요소는 첫 번째 요소의 하위 요소입니다.
선택자 이 선택자는 요소 바로 뒤에 있는 요소를 참조합니다. 두 요소는 동일한 상위 요소를 가져야 합니다.
Selector~는 와 유사하지만 영향을 받는 요소가 반드시 첫 번째 요소를 따르지는 않습니다.

의사 클래스 이름과 참조 요소 사이에 ":"를 추가합니다.
예: myclass:nth-child(2)
myclass 요소의 두 번째 요소
키워드 " 홀수 ", "짝수"
myclass:nth-child(odd): 부모 요소 인덱스 위치가 홀수인
에 영향을 미칩니다.
myclass:nth-child(even): 부모 요소의 인덱스 위치가 홀수인
에 영향을 미칩니다. 요소 인덱스 위치는 짝수입니다

코드 복사

코드는 다음과 같습니다.

.test:nth- child(odd)
{
color:Blue
}
.test:nth-child(even)
{
color: 빨간색 ;
}
.test:nth-child(2)
{
색상: 녹색
}
">

1

2

🎜>

🎜>

효과는 다음과 같습니다:
1
2
1
2
1
2
부정 의사 클래스