파일 유형을 대상으로하는 CSS3 속성 선택기
그만큼 속성 선택자 불필요한 요소를 추가하지 않고 요소를 선택하는 데 정말 유용한 기능입니다. 신분증 또는 수업. 대상 요소에 다음과 같은 속성이있는 한 href, src 과 유형 우리는 그렇게 할 필요가 없다..
속성 선택자는 실제로 주위에있다. CSS 2.1 이후, 이제 CSS3 사양에 추가 된 몇 가지 유형의 속성 선택기를 사용하여 요소의 속성을 더욱 구체적으로 타겟팅 할 수 있습니다.
이 글에서는 구문 중 하나를 사용하여 파일 형식 속성의 값의 일부로서 삽입되는.
구문 및 브라우저 지원
그만큼 파일 형식 항상 파일 이름 끝에 있습니다. 그래서 그것을 선택하려면 파일 형식 우리는 다음 문법을 사용할 수있다. [attr $ = "value"]. 이 구문은 $ = 연산자는 속성 값의 끝을 대상으로합니다. 예를 들면 다음과 같습니다.
a [href $ = ".pdf"] : before background : url ( '... /images/document-pdf-text.png') no-repeat;
위의 스 니펫은 속성 값이 끝나는 모든 링크를 선택합니다. .pdf 단어 - 문서 - 아이콘을 :전에 의사 요소.
PDF 아이콘 소스: 푸가 아이콘
이 선택자의 일반적인 활용이지만, 우리는 분명히 그 이상으로 갈 수 있습니다.
브라우저 호환성에 관해서; 이 구문은 공식적으로 CSS3 사양으로 소개되었지만 실제로는 Internet Explorer 7, 모든 디자인을 통해 안전하게 적용 할 수 있습니다..
예제
당신이 시도하지 않을 경우 결코 알지 못할 것이다. 우리는 아직 이해할 수없는 것을 더 잘 이해하기 위해 새로운 것을 시도 할 필요가 있습니다. 여기서는이 구문이 특정 HTML 구조의 요소를 대상으로하는 데 매우 도움이 될 수있는 방법을 보여줄 것입니다.이 HTML 구조는 일반 CSS 만 사용하여 적용하기가 어려웠습니다.
아래에는 HTML5 구조 캡션이있는 세 개의 이미지를 나열합니다. 데모 용도로만 사용되며 마크 업은 다음 스 니펫과 정확히 동일 할 필요는 없습니다 (예 : 한 이미지 또는 세 개의 이미지가 추가 될 수 있음).하지만이 구문을 적용 할 수있는 방법을 알면됩니다. 특정 HTML 구조.
-
jpg -
PNG -
gif
위에 나열된 각 이미지의 형식 또는 확장자는 다음과 같습니다., jpg, PNG, 과 gif. 또한 이미지 확장명을 나타내는 캡션이 있습니다. 이 캡션은 이미지 레이블로 작동합니다..
그래서, 여기에 계획이 있습니다, 우리는 각기 다른 이미지 확장을위한 캡션에 다른 배경색을 줄 것입니다. JPG 이미지는 녹색 자막 색상을 선택하면 PNG가 표시됩니다. 푸른, 마지막으로 GIF는 자.
우선, 그림 태그의 위치를 상대적으로 설정해 보겠습니다. 순수한 캡션 위치.
figure 위치 : 상대적;
테두리와 그림자가있는 이미지에 작은 장식을 추가하십시오..
img 경계선 : 5 픽셀 고체 #ccc; -webkit-box-shadow : 1px 1px 3px 0px rgba (0, 0, 0, .5); 상자 그림자 : 1px 1px 3px 0px rgba (0, 0, 0, 0.5);
그런 다음 캡션의 기본 스타일과 위치를 설정합니다. 이미지 캡션 또는 라벨의 크기는 50px입니다..
img + figcaption color : #fff; 위치 : 절대; 상단 : 0; 오른쪽 : 0; 너비 : 50px; 높이 : 50px; 선 높이 : 50px; 텍스트 정렬 : 가운데;
이제 배경색을 추가 할 차례입니다. 이렇게하려면 속성 선택자를 인접한 형제 선택자와 결합 할 수 있습니다, +.
img [src $ = ".jpg"] + figcaption 배경색 : # a8b700;
위의 스 니펫은 source 속성이로 끝나는 모든 이미지를 타겟팅합니다. .jpg, 인접한 선택기가 옆에있는 요소를 찾습니다. 이 경우 묘지 에 추가됩니다. # a8b700 배경색.
나머지 이미지 형식은 .png 및 .gif의 모든 코드가 있습니다..
img [src $ = ".png"] + figcaption 배경색 : # 389abe; img [src $ = ". gif"] + 그림 캡션 background-color : # 8960a7;
이제 아래의 데모 링크에서 실제로 어떻게 작동하는지 보자. 그렇지 않으면 소스를 다운로드하여 오프라인에서 검사 할 수 있습니다..
- 데모
- 소스 다운로드
이미지 소스는 다음과 같습니다.: MacPro 1, MacPro 2 및 MacPro 3
결론
애트리뷰트 선택기를 사용하여 위에 보여 주려했던 것과 같은 특별한 선택기를 사용하여 스타일의 우아한면을 볼 수 있기를 바랍니다. 따라서 다음에 HTML을 스타일링 할 때 적절하게 구조화 된 마크 업을 추가로 망치기보다는 특별한 셀렉터를 사용하여 스타일을 적용 할 수 있는지에 대해 조사 할 것을 매우 권장합니다. 수업 또는 신분증.
실제로이 유형의 새로운 선택기가 두 개 더 있습니다. 다음 선택기에서 다루므로 계속 지켜봐주십시오..
