가장 일반적으로 사용되는 네 가지 선택 방법이 있습니다
. ID 규칙 선택(예:
콘텐츠 인용
) 버튼#버튼{}
#urlBar[type="text"] { }
div > p >span#demo{}
콘텐츠 인용
등 클래스 규칙 선택
버튼.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
콘텐츠 인용
등 태그 규칙 선택
td { }
div > p { }
input[ type= "checkbox"] { }
참조 콘텐츠
와 같은 균일 선택기
*
: after
[hidden="true"]
이들은 모두 가장 오른쪽부터 가장 왼쪽에 있는 전체 규칙의 끝까지 일치를 시작합니다.
예를 들어, 가장 오른쪽 규칙에 따라 선택하려는 요소가 이미 결정되어 있는 경우가 있습니다.
더 많은 규칙 일치로 인해 성능이 낭비됩니다.
예를 들어 div > p >span#demo{}
div > p >span은 전혀 의미가 없습니다.
개선 사항:
ID는 고유합니다. 중복 규칙을 첨부할 필요가 없습니다. 정확하게 일치시킬 수도 있습니다.
콘텐츠 인용
버튼#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p >span#demo{} -> #demo{}
다음은 표시되지 않아야 합니다
.content.toolbarButton
{ } -> .toolbarButton{}을
인용하면요소에 클래스를 직접 제공하는 것이 더 좋습니다.
예를 들어 div > p > sp > a{}는
특별한 성능을 제공할 수 있습니다. a에 대한 클래스를 직접 작성하세요.
특별한 상황에는 특별한 대우가 필요합니다.
예를 들어 페이지 구조가 깨끗한지 확인해야 하는 경우가 있습니다. 이 방법은 이후 개정판의 요구 사항을 충족하는 데 사용됩니다. 그것은 또한 가능하다. 균형 속에서 최고의 솔루션을 찾아보세요.
상속 사용
#demo .left{text-align:left} ->#demo{text-align:left}
참고: 원본 기사에서는 XUL이 사용되었습니다. XUL에 노출되지 않은 학생들에게는 태그가 약간 보일 수 있습니다. 이상하지만 이해하는 것은 어렵지 않습니다.