Slik bruker du: ikke () selgeren i CSS3 - dummies

I noen tilfeller er det enklere å velge objekter i CSS3 i henhold til egenskaper som de ikke har gjør dette kan du bruke a: ikke (velg). For eksempel vil du kanskje endre formateringen av hvert objekt som ikke er innenfor en tag.

I dette tilfellet kan du opprette en liste med koder ved hjelp av kommasvælgeren og håper at listen er fullført, eller du kan bare bruke: not () velgeren. For eksempel: ikke (p) velger hvert objekt som ikke er en

tag. Du kan også opprette komplekse valg ved hjelp av: ikke () velgeren: En velg av: ikke (div> p), for eksempel, velger hver

-kode som ikke har en tag som forelder.

Selv med denne korte listen med tagvelger, kan du se at CSS er ganske fleksibel når du arbeider med tagger. Å se selgerne i aksjon vil hjelpe deg å forstå dem litt bedre. Følgende fremgangsmåte viser hvordan du bruker de forskjellige kodene:

Opprett ExternalCSS. HTML og ExternalCSS. CSS-filer og kopier dem til en ny mappe.

1. Åpne ExternalCSS. HTML.

2. Skriv inn følgende kode etter den eksisterende

3. -taggen i filen og lagre endringene på disken.

   Tekst i en DIV.

   Tekst med en DIV-forelder.
   Tekst etter en DIV.
   Mer tekst etter en DIV.
   Denne koden legger ganske enkelt til koder i spesifikke ordninger slik at du kan teste de ulike valgene. Hvis du åpner den resulterende filen nå, ser du at hver av
   

   -kodene er formatert automatisk som den opprinnelige

   -taggen.

   Åpne ExternalCSS. CSS.

   

4. Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

5. div> p {text-align: right;} INSERT BILDET FOR 2. 2 HER

   Last testsiden.
   

6. Legg merke til at den eneste

   -taggen som har blitt påvirket, er den som har taggen som en direkte forelder. I tillegg merker du at forrige formatering kaskader inn i gjeldende formatering. Du har ikke tilsidesatt noen av eksisterende formatering, så teksten vises som før - det bruker rettmessig rettferdiggjørelse i stedet for standard venstrejustering.

   Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

   

7. div p {text-decoration: line-through; bakgrunnsfarge: # ff7f7f;}

   Last testsiden.
   

8. Merk at to linjer påvirkes denne gangen. I tillegg har bakgrunnsfargetypen blitt endret, så disse to linjene bruker den nye fargen - det har forrang over den opprinnelige fargen. Når du tenker på den cascading delen av CSS, tenk på en strøm der endringer nedstrøms har forrang over den opprinnelige tilstanden til vannet.

   Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

   

9. div + p {font-family: monospace; font-style: kursiv;}

   Last testsiden.
   

10. Bare linjen som vises direkte etter at den er berørt: Skriften er endret til en skrifttype font (normalt reservert for kode) og kursiv.

    Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

    

11. div ~ p {font-weight: bolder; skriftstørrelse: 30px; margin: 0px; farge: # 7f007f;}

    Oppdater testsiden.
    

12. Legg merke til at både

    

-koder som vises etter taggen, påvirkes. Skriften vises nå fet og er større. Skriftfargen har også blitt endret. Spesielt viktig i denne delen av eksemplet er at innstillingen marginen til 0px blir kvitt den hvite plassen mellom linjene.