의견 : HTML5는 새로운 CSS 선택기와 의사 범주를 추가했습니다. 이 기사는 일부를 편집했으며 간단한 사용 소개를 제공했습니다. HTML5를 좋아하는 친구는 그것을 참조 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
선택자p [name^= my] {font-size : 14px}
selector ^= 규칙은 이름 속성을 가진 모든 <p> 요소 태그에 적용됩니다.
p [name $ = my] {font-size : 14px}
선택기 $ = 규칙은 <p> 요소 태그로 끝나는 모든 이름 속성에 적용됩니다.
p [name*= my] {font-size : 14px}
selector $ = 규칙은 내로 끝나는 <p> 요소를 포함하는 모든 이름 속성에 적용됩니다.
선택기>, +, ~
선택기>는 영향을받는 요소가 첫 번째 요소의 자식임을 의미합니다.
Selector +이 선택기는 요소 바로 다음 요소를 말하며이 두 요소는 동일한 부모가 있어야합니다.
선택기 ~는 +와 유사하지만 영향을받는 요소가 반드시 첫 번째 요소를 따르는 것은 아닙니다.
의사 클래스의 이름과 참조 요소를 추가하십시오.
예 : MyClass : Nth-Child (2)
MyClass 요소의 두 번째 요소
키워드 홀수
myclass : nth-Child (홀수) : 홀수로 부모 요소의 인덱스 위치에 영향을 미칩니다.
myclass : nth-Child (짝수) : 부모 요소의 인덱스 위치에 영향을 미칩니다.
<스타일>
. 테스트 : nth-Child (홀수)
{
색상 : 파란색;
}
. 테스트 : nth-Child (짝수)
{
색상 : 빨간색;
}
. 테스트 : Nth-Child (2)
{
색상 : 녹색;
}
</스타일>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
효과는 다음과 같습니다.
1
2
1
2
1
2
의사 클래스를 부정하십시오
: NOT (P) {색상 : 빨간색}
<p> 요소를 제외한 다른 모든 요소는 빨간색입니다