Selektor atrybutów CSS3 Kierowanie na typ pliku

Ten artykuł jest częścią naszego „Seria samouczków HTML5 / CSS3” - dedykowane, aby pomóc Ci stać się lepszym projektantem i / lub deweloperem. Kliknij tutaj aby zobaczyć więcej artykułów z tej samej serii.

The selektory atrybutów to naprawdę przydatna funkcja do wyboru elementu bez dodawania zbędnych ID lub klasy. Tak długo, jak element docelowy ma atrybut podobny href, src i rodzaj nie musimy tego robić.

Selektory atrybutów rzeczywiście istnieją od CSS 2.1, a teraz z kilkoma dodatkowymi typami selektorów atrybutów dodanymi do specyfikacji CSS3, jesteśmy w stanie celować w atrybut elementu jeszcze dokładniej.

W tym poście zamierzamy użyć jednej ze składni, aby wybrać Typ pliku który jest wstawiany jako część wartości atrybutu.

Obsługa składni i przeglądarki

The Typ pliku jest zawsze na końcu nazwy pliku. Więc, aby to wybrać Typ pliku możemy użyć następującej składni [attr $ = "value"]. Ta składnia używa $ = operator, który będzie kierował koniec wartości atrybutu, na przykład:

 a [href $ = ". pdf"]: before background: url ('… /images/document-pdf-text.png') no-repeat;  

Powyższy fragment wybierze każdy link, na którym kończy się wartość atrybutu .pdf i wstaw ikonę słowa-dokumentu w :przed pseudoelement.

Źródło ikony PDF: Ikony fugi

Chociaż jest to powszechne wykorzystanie tego selektora, z pewnością możemy wykroczyć poza to.

Odnośnie kompatybilności przeglądarki; chociaż ta składnia została oficjalnie wprowadzona jako specyfikacja CSS3, to faktycznie jest obsługiwana od Internet Explorer 7, dzięki czemu możesz bezpiecznie zastosować go we wszystkich swoich projektach.

Przykład

Nigdy się nie dowiesz jeśli nie spróbujesz. Po prostu musimy spróbować czegoś nowego, aby lepiej zrozumieć coś, czego jeszcze nie rozumiemy. Więc tutaj pokażemy, jak ta składnia może być bardzo pomocna i przydatna w celu skierowania elementu w konkretnej strukturze HTML, który był nieco trudny do zastosowania przy użyciu tylko zwykłego CSS.

Poniżej mamy Struktura HTML5 aby wyświetlić trzy obrazy z ich podpisem. To jest tylko dla celów demonstracyjnych, twój znacznik nie musi być dokładnie taki jak poniższy fragment (np. Możesz mieć tylko jeden obraz lub nawet trzy dodatkowe obrazy), ale chodzi o to, że wiesz, jak można zastosować tę składnię w szczególna struktura HTML.

Każdy z powyższych obrazów ma następujące formaty lub rozszerzenia, jpg, png, i gif. Mają też podpis, który reprezentuje rozszerzenie obrazu; ten podpis będzie działał jako etykieta obrazu.

Oto plan, podamy różne kolory tła dla każdego rozszerzenia obrazu. Obraz JPG otrzyma Zielony kolor napisów, otrzyma PNG niebieski, i wreszcie dostanie się gif fioletowy.

Po pierwsze, ustawmy względnie pozycję znacznika figury, ponieważ będziemy stosować absolutny pozycja podpisu.

 postać pozycja: względna;  

Dodaj trochę dekoracji dla obrazów z obramowaniami i cieniami.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Następnie ustawiamy domyślny styl i położenie podpisu. Podpis obrazu lub etykieta będą miały kwadrat 50 pikseli.

 img + figcaption color: #fff; pozycja: absolutna; top: 0; po prawej: 0; szerokość: 50px; wysokość: 50px; line-height: 50px; wyrównywanie tekstu: środek;  

Teraz nadszedł czas, aby dodać kolor tła. Aby to zrobić, możemy połączyć selektor atrybutu z sąsiednim selektorem rodzeństwa, +.

 img [src $ = ". jpg"] + figcaption kolor tła: # a8b700;  

Powyższy fragment będzie kierował do każdego obrazu z atrybutem źródłowym zakończonym na .jpg, następnie sąsiedni selektor znajdzie element obok niego. W tym przypadku fig zostanie dodany z # a8b700 kolor tła.

A oto wszystkie kody dla pozostałych formatów obrazu: .png i .gif.

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Zobaczmy teraz, jak się to stanie na żywo z poniższego linku demo, albo możesz pobrać źródło, aby sprawdzić je w trybie offline.

• Próbny
• Pobierz źródło

Źródła obrazu są następujące: MacPro 1, MacPro 2 i MacPro 3

Wniosek

Mamy nadzieję, że możesz zobaczyć elegancką stronę stylizacji za pomocą specjalnego selektora, jak to, co próbowaliśmy wykazać powyżej, używając selektora atrybutów. Tak więc, następnym razem, gdy stylizujesz swój HTML, zdecydowanie zalecamy, abyś zbadał, czy twoja stylizacja może być zastosowana za pomocą specjalnego selektora, zamiast rujnować prawidłowo ustrukturowany znacznik dodatkowymi klasy lub ID.

Są jeszcze dwa nowe selektory tego typu, które omówimy w następnych postach, więc bądźcie czujni.