[CSS/DIV] Przeanalizuj użycie czterech głównych selektorów wartości atrybutów CSS

Ten artykuł opisze to CiSelektor wartości właściwości CSSFormat selektora atrybutów to element z nawiasem, z atrybutami w nawiasach lub wyrażeniami atrybutów (nie wiem, czy opis jest poprawny, to słowa stworzone samodzielnie), takie jak h1[title], h1[title="logo"] itd., wierzę, że wiele się nauczysz w tym artykule.

Poradnik CSS: Selektor wartości atrybutów CSS

CSS AttributeSelectory, być może nie powinieneś być nieobcy selektorom atrybutów, w istocie selektory id i klasy to tak naprawdę selektory wartości atrybutów, wystarczy wybrać id lub wartość klasy.

Format selektora atrybutów to element następujący w nawiasach, z atrybutami w nawiasach lub wyrażeniami atrybutów (nie wiem, czy opis jest poprawny, to słowa stworzone samodzielnie), takie jak h1[title], h1[title="Logo"] itd., poniżej można zobaczyć 4 konkretne formy z mojej dyskusji.

1. Prosty selektor wartości atrybutów CSS

Niezależnie od nazwy, jest to cecha prostego selektora atrybutów.

H1[klasa]{color:silver; będzie działać na dowolnym elemencie H1 z klasą, niezależnie od wartości klasy. Dlatego<h1class="hoopla">Cześć</h1>, <h1class="sile">Serenity</h1>, <h1class="fancy"> h1 Fooling</h1> będzie objęty tą zasadą.

Oczywiście ta "własność" nie jest tylko klasą czy id, ale może być wszystkimi prawidłowymi własnościami elementu, takimi jak alt img, np. img[alt]{cssdeclarationshere; Będzie dotyczyć każdego elementu IMG z atrybutem Alt. Następnie a[href][title]{font-weight:bold; A co z }? Jak wiesz, działa to na elementach posiadających zarówno atrybuty href, jak i title, takie jak <atitle="W3CHome">W3C</a>.

2. Precyzyjny selektor wartości atrybutów CSS

id i class to zasadniczo dokładne selektory wartości atrybutów, tak, h1#logo jest równe h1[id="logo"]. Jak wspomniano wcześniej, nie ograniczamy się tylko do tożsamości czy klasy, możemy używać dowolnej własności! Na przykład, a[][title="W3CHome"]{font-size:200%; } zostanie zastosowane do <atitle="W3CHome">W3C</a>.

3. Niektóre selektory wartości atrybutów CSS

Jak sama nazwa wskazuje, dopóki wartość atrybutu częściowo się zgadza (w tym przypadku część, która faktycznie pasuje do całego słowa), będzie działać na ten element. Przyjrzyjmy się przykładowi:

Każda z tych opcji może sprawić, że czcionka litery p będzie pogrubiona.

Ten selektor jest bardzo przydatny, na przykład, jeśli chcesz stylizować ilustrację z napisem "Figure" w tytule, np. title="Figure5:xxx description", możesz użyć img[title~="Figure"].

Należy zauważyć, że jak podkreśliłem w pierwszym zdaniu, trzeba dopasować całe słowo, a img[title~="Figure"] nie będzie pasować do title="Figure5:xxx description".

Zrobiłem też mały test, zmieniasz "Figure" na "Illustration" w przykładzie, a img[title~="Figure"] na img[title~="Illustration"], i nadal się zgadza w Firefoxie, niezależnie od tego, czy kodowanie to GB2312 czy UTF-8. Wygląda na to, że wsparcie CSS dla chińskiego nie jest złe.

4. Specjalny selektor wartości atrybutów CSS

Trochę dziwne, ten selektor. Działa to tak, cóż, łatwiej podać przykład niż go opisać.

*[lang|="en"]{color:white; Ta reguła wybierze wartość atrybutu lang lub elementu zaczynającego się od en-. To znaczy, może pasować do <h1lang="en">Cześć!</h1>, <plang="en-us">Pozdrowienia!</p>oraz <divlang="en-au">Dzień dobry!</div>i nie pasuje<plang="fr">Bonjour!</p>oraz <h3lang="cy-en">Jrooana!</h3>.