CSS 3에서 다음 태그 구조를 포함하는 HTML 파일을 만든다고 가정해 보겠습니다.
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
그런 다음 CSS 파일에서
div[id^="nav"] { 배경:#ff0 }
" ^ "에 주목하세요
이 경우 CSS는 [u]div#nav-primary 및 div#nav-secondary[/u]를 제어합니다. 이 두 라벨 앞에는 nav , "-"로 구분되어 있는지, ID가 앞에서 뒤로 일치하는지 불분명합니다 [땀]
div[id$="기본"] { 배경:#ff0;
" $ "라는 점에 유의하십시오.
이 경우 CSS는 [u]div#nav-primary 및 div#content-primary[/u]를 제어합니다. 이 두 태그 뒤에는 '-'를 구분자 로 사용한 것인지, 아니면 ID가 뒤에서 앞으로 일치하는지 불분명하니 참고하세요.
div[id*="content"] { 배경:#ff0;
" * "임을 참고하세요.
이 경우 CSS는 [u]div#content-primary div#content-secondary 및 div#tertiary-content[/u]를 제어합니다. 이 태그에는 모두 내용이 포함되어 있습니다. "-"로 구분되어 있는지 또는 ID가 자동으로 스캔되어 일치하는지 명확하지 않습니다 [땀].
작성자님이 지금은 IE를 제외한 다양한 브라우저의 최신 버전에서 이 태그를 지원한다고 말씀하신 것 같은데, 시도해 보시진 않겠습니다~ [웃음]
div#content-primary:target { 개요:1px 솔리드 #300 }
" :target "에 주목하세요
이 경우 CSS는 앵커 링크 http://www.example.com/index.html #content-primary를 제어합니다(일부 웹에서 볼 수 있는 반환 과 비교하여 앵커 링크는 웹 페이지 내의 링크로 이해될 수 있음). 페이지) 상단 )
저자는 이제 Mozilla와 Safari 브라우저가 이를 지원한다고 말합니다.
입력[type="text"]:활성화됨 { 배경:#ffc }
입력[type="text"]:비활성화 { 배경:#ddd }
" [type="text"]:enabled "에 유의하세요.
이것은 양식을 제어하는 CSS입니다. "[u][type="text"][/u]"는 양식의 유형이 텍스트임을 의미하는 것 같습니다. . . [u]type="password"[/u]는 무엇입니까?
입력:체크됨 { 테두리:1px 솔리드 #090 }
" :checked "를 참고하세요.
이는 양식의 "선택"을 제어하는 CSS입니다. . .
저자는 이제 Opera와 Mozilla 브라우저가 이러한 기능을 지원한다고 말합니다.
:루트 { 배경:#ff0 }
HTML { 배경:#ff0 }
" :root "에 주의하세요.
이 ":root"는 html보다 상위 태그입니다. 이치바 치도리가 쓴 이 글을 읽어보면 html과 body가 있다는 것을 알 수 있습니다. 헤헤~
저자는 이제 Mozilla와 Safari 브라우저가 이를 지원한다고 말합니다.
다음은 nth-child()가 더 재미있네요 ㅎㅎ~ 괄호 안에 숫자나 기본 문자를 넣어도 됩니다~
p:n번째-자식(3) { 색상:#f00 }
즉, 처음 등장하는 P를 기준으로 '3'의 배수인 모든 P가 제어된다는 뜻인 것 같아요~
p:n번째-자식(홀수) { 색상:#f00 }
이는 처음 나타나는 P를 기준으로 모든 홀수 P가 제어된다는 의미인 것 같습니다~
p:n번째-자식(짝수) { 색상:#f00 }
첫 번째 P를 기준으로 짝수 의 P를 모두 제어한다는 뜻인 것 같아요~
p:n번째-자식(3n+0) { 색상:#f00 }
p:n번째-자식(3n) { 색상:#f00 }
이 두 태그는 동일합니다. 첫 번째 태그 이후의 0은 아무런 효과가 없기 때문입니다. 즉, 처음 나타나는 P의 3배인 P가 제어된다는 의미입니다~ (정말 반전입니다, HOHO~ [rolleyes]) 즉 , 이 "n"은 0.1.2.3.4.5.6...~의 값을 취합니다. 계산할 수 있는 만큼 많은 P가 제어됩니다. . .
tr:n번째-자식(2n+11) { 배경:#ff0 }
위의 내용을 이해하시면 이해하기 어렵지 않으나 그가 관리하는 레이블이 "tr"로 변경되었습니다. 이는 테이블이 더 다양해질 것이라는 의미입니다. 글쎄요, 빨리 집에 가서 초등 산수를 다시 배우세요. . . (그런데 그런 라벨이 컴퓨터 처리 효율을 높여주는 걸까요? [혼란] 제 답답함이 불필요했으면 좋겠습니다...)
p:마지막 자식 { 배경:#ff0 }
p가 제어되기 전의 A p(NND, p가 왔다 갔다, pp에 도달[땀])
:not(p) { 테두리:1px 솔리드 #ccc }
이 p는 제어되지 않습니다. 이는 이전 스타일과 함께 사용해야 함을 의미합니다. . .
p ~ ul { 배경:#ff0 }
ul이 p보다 우선순위로 표시됩니다. 이것이 어떤 우선순위 방법인지 모르겠습니다. . .
기본적으로 제가 이해할 수 있는 것은 이것이 전부입니다. 다음 두 웹사이트에 가서 제가 틀린 말을 하면 꼭 알려주세요.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/