CSS3 최초의 구조 선택기 살펴보기
CSS3에 대해 내가 좋아하는 한 가지는 선택기를 새로 추가 한 것입니다.이 선택기를 사용하면 수업, 신분증 또는 다른 엘리먼트 애트리뷰트이고, 우리가 여기서 다룰 하나의 애트리뷰트는 다음과 같다., : 첫 번째 유형.
그만큼 : 첫 번째 유형 selector는 지정된 요소의 첫 번째 하위 항목을 타겟팅합니다. 예를 들어 아래의 스 니펫은 첫 번째 요소를 h2 웹 페이지에서.
h2 : 첫 번째 형식 / * 스타일 선언 * /
그만큼 : 첫 번째 유형 또한 : nth-of-type (1), 그래서 단지 먼저 두 번째, 세 번째 등을 선택할 수 있습니다. 다음 스 니펫은 두 번째 코드를 h2 웹 페이지의 요소.
h2 : nth-of-type (2) / * 스타일 선언 * /
: 첫 번째 유형” 대. “: 첫 번째 자식”
이 두 선택자가 똑같은 일을하는 것처럼 보일 수도 있지만 그렇지 않습니다. 다음 데모를 보겠습니다.
우리가 5 개의 단락 요소를 div, 이렇게 :
프라그 그래프 1
프라그 그래프 2
프라그 그래프 3
프라그 그래프 4
프라그 그래프 5
이제 첫 번째 단락을 : 첫 번째 자식 선택자.
p : 첫 번째 자녀 패딩 : 5px 10px; border-radius : 2px; 배경 : # 8960a7; color : #fff; 국경 : 1 픽셀 고체 # 5b456a;
예상했던대로 첫 번째 단락이 성공적으로 선택되었습니다..
- : 첫 번째 자녀 데모
그러나 우리가 전에 다른 요소를 추가하십시오. 첫 번째 단락, h1, 아래 스 니펫과 같습니다.
제목 1
프라그 그래프 1
프라그 그래프 2
프라그 그래프 3
프라그 그래프 4
프라그 그래프 5
첫 번째 단락은 선택되지 않습니다., 안에있는 첫 번째 자녀로 div ~이다. 더 이상 단락, 하지만 지금은 h1.
그래서, 이것은 상황입니다. : 첫 번째 유형 선택자가 문제를 해결하기 위해 온다..
p : 첫 번째 유형 패딩 : 5px 10px; border-radius : 2px; 배경 : # a8b700; color : #fff; 국경 : 1 픽셀 고체 # 597500;
- : 첫 번째 유형의 데모
그만큼 “마지막” 선택자
거기에 “먼저”, 그러면 또한 “마지막”.
위에서 논의한 두 개의 선택자의 반대는 다음 두 개의 선택자입니다. 그만큼 :막내 그리고 : last-of-type. 그들은 기본적으로 위의 두 가지와 같습니다. 지정된 요소의 마지막 자식.
예를 들어, 아래의 스 니펫은 div 내부의 마지막 단락을 타겟팅합니다..
p : 마지막 자식 패딩 : 5px 10px; border-radius : 2px; 배경 : # 8960a7; color : #fff; 국경 : 1 픽셀 고체 # 5b456a;
- : 마지막 아이 데모
그리고이 스 니펫은 위에서 설명한 것과 같은 상황에서 마지막 단락을 대상으로합니다. 이번에는 직접 다른 요소가 뒤 따른다..
p : last-of-type 패딩 : 5px 10px; border-radius : 2px; 배경 : # a8b700; color : #fff; 국경 : 1 픽셀 고체 # 597500;
- : last-of-type 데모
Selectivizr
CSS3의 다른 새로운 기능과 마찬가지로 이러한 셀렉터는 기존 브라우저에서 지원되지 않습니다. 주로 Internet Explorer 6 - 8, 그 예외는 : 첫 번째 자식 CSS2.1 이후로 추가되었습니다. 그것의 상대적인 :막내 CSS3에서만 추가되었습니다..
따라서 여기에서 언급 한 모든 선택기가 실제로 웹 사이트에 필요한 경우 JavaScript 라이브러리를 사용할 수 있습니다. 선택기 CSS3 선택기 기능을 에뮬레이션하는 방법.
Selectivizr은 jQuery, Dojo, Prototype 및 MooTools와 같이 작동하기 위해 다른 JavaScript 라이브러리에 종속됩니다. 공식 웹 사이트의 비교표를 보면, MooTools는 모든 셀렉터를 처리 할 수있는 것 같습니다..
Selectivizr과 함께 다음과 같이 포함 시키십시오.
위의 조건부 주석은 이러한 라이브러리가 Internet Explorer 8 이하에서만로드되도록합니다..
마지막으로, 다음 링크에서 데모를 볼 수 있으며, 이제는 최신 브라우저와 오래된 브라우저 (IE8 이하)에서 모두 작동해야합니다. 추가 검토를 위해 원본 파일을 다운로드 할 수도 있습니다. 즐겨.
- 데모
- 소스 다운로드
