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

WBOY
풀어 주다: 2016-05-16 15:49:08
원래의
1948명이 탐색했습니다.

선택기
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
부정 의사 클래스

:not(p ){color:red}
제외< ;p> 요소를 제외한 모든 요소는 빨간색입니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿