A Katso CSS3-kielen (EI) valitsinta
CSS: ssä on joitakin valintoja, joiden avulla voit valita elementtejä tietyissä olosuhteissa, kuten : hover, : focus, : aktiivinen, jne. Tänään emme kata näitä valintoja. Tarkastelemme sellaista, joka on vielä vähän tunnettu menetelmä, mutta jota useimmat web-suunnittelijat käyttävät - se on :ei valitsin tai tunnetaan myös nimityksen valitsimena.
Mitä se tekee?
Olen varma, että :ei itse nimi on jo kuvannut sen tehtävää, että se vain valitsee vastakkainen määritelty elementti tai tila. Esimerkiksi:
Tämä syntaksi valitsee minkä tahansa muun kuin p (kohta).
: Ei (p) Alla olevassa esimerkkisyntaksissa valitaan div elementti ei sinulla on luokka ABC
div: ei (abc-päätteiset) No niin, nyt yritetään tätä valitsinta todellisessa esimerkissä:
Ensinnäkin tehdään muutama kohta Wikipediasta ja muutama linkki fiktiivisiin verkkotunnuksiin. Tässä on kohdan HTML-merkintä.
CSS: ei Selector Demo
Jujubes-applika-seesami napsahtaa chupa chupsille suklaakakku. Kaura kakku vaahtokarkki wypas toffee donitsi kakku. Chupa chups hyytelö cupcake gummi kantaa. Sitruunapisarat kakun vohveli.
Juustokakku suklaakakku donitsi hyytelö makea rulla jauhe soufflÃ? Â? Wypas puuvilla karkkia sitruuna tippaa eväste karkkia donitsi bonbon marsipaani. Macaroon karkkia lakritsi jelly-o. Suklaa kakku makea roll karkkia vaahtokaramelli DRAGA ?? Â ?? A'a © e hattara tonttu vaahtokarkki.
Pudding topping vaahtokarhu karhu. Leivin muffinssi leivonnaiset hedelmäkakku hyytelö piparkakut seesami napsahtaa. Candy-vanukas cupcake-karhu. Porkkana kakku muffinssi puuvilla karkkia tuotsie roll muffinssi. Jelly pavut tart dragÃ? Â? vohvelikastike. Sweet roll toffee sokeri luumu leivonnaiset dragÃ? Â? bonbon karkkia muffini.
Kakku marsipaani applika leivonnaiset wypas-hedelmäkakku. Kauran kakku suklaa wypas dragÃ? Caramels suklaapatukan croissant-kiekkakupillikakku jujubes-suklaapatukalla. Biscuit candy canes dragà     ⠀ eCandy brownie kauran kakku seesami snaps juustokakku jauhe tootsie roll keksi karhu kynsiä. Soufflà Â? evästeen jälkiruoka makea bonbon.
Suunnitelma on täällä: valitsemme vain linkit, jotka eivät viittaa Wikipediaan, ja anna sitten linkeille huutomerkki, joka kiinnittää huomiota näihin linkkeihin.
Ensinnäkin lisätään :jälkeen pseudoelementti kaikilla linkeillä merkin sijoittamiseksi, ja määrittelemme sen inline-block elementti.
a: jälkeen näyttö: inline-block;
Valitse sitten jokainen linkki, joka ei osoita Wikipediaa, ja yhdistämme sen :ei valitsin, jossa on määritteenvalitsin. Tässä määritteiden valitsin valitsee jokaisen kiinnityskoodin, jonka href-attribuutti alkaa http://en.wikipedia.org/ ja yhdistämällä se :ei, se ilmeisesti valitsee päinvastaisen. Joten täällä mennään:
a: ei ([href ^ = "http://en.wikipedia.org/")): jälkeen taustaväri: # F8EEBD; raja: 1px kiinteä # EEC56D; raja-säde: 3px 3px 3px 3px; väri: # B0811E; sisältö: "!"; kirjasinkoko: 10pt; margin-left: 5px; pehmuste: 1px 6px; asema: suhteellinen;
Se toimii! Ankkuritunnisteilla, jotka eivät osoita Wikipediaa, on nyt huutomerkki.
Chrome-virhe
Jos tarkastelet tätä Chromessa, huomaat, että sulatettu vaikutus ei ole edellä mainittu. Kaikilla linkeillä näyttää olevan huutomerkki URL-osoitteesta riippumatta.
Tätä tapausta on käsitelty virheenä. Joten korjata tämä virhe, meidän on lisättävä tämä sääntö.
a [href ^ = "http://en.wikipedia.org/]] / * Chrome Hack * / näyttö: inline-block;
Ja nyt ongelma olisi pitänyt korjata.
- esittely
johtopäätös
Joissakin tilanteissa käytetään :ei valitsin on todella tehokkain vaihtoehto, kuten yllä oleva esimerkki, jossa voimme valita joitakin satunnaisia elementtejä lisäämättä tarpeettomia luokkia tai lisämerkintää asiakirjaan.
Voit todella rakentaa hyviä vaikutuksia käyttämällä tätä valitsinta, ja tämä on yksi esimerkki: Suodata toiminnallisuutta CSS3: n kanssa
