Hur man hittar CSS-v\u00e4ljare<\/h2>\n
Du beh\u00f6ver bara ett verktyg och du har det redan: en webbl\u00e4sare!<\/p>\n
Varje webbl\u00e4sare har en upps\u00e4ttning utvecklarverktyg<\/a> som kan anv\u00e4ndas f\u00f6r att unders\u00f6ka en webbplats. Jag kommer att anv\u00e4nda Chrome<\/a>, men du kan anv\u00e4nda vilken modern webbl\u00e4sare du vill. De har alla en extremt liknande upps\u00e4ttning verktyg.<\/p>\n \u00d6ppna f\u00f6rst din hemsida p\u00e5 en ny flik.<\/p>\n H\u00f6gerklicka var som helst p\u00e5 sidan och v\u00e4lj alternativet "Visa k\u00e4lla". Detta \u00f6ppnar en sida som ser ut s\u00e5 h\u00e4r p\u00e5 en ny flik:<\/p>\n K\u00e4llkoden f\u00f6r www.competethemes.com<\/p>\n Detta \u00e4r webbsidans r\u00e5 HTML. Detta \u00e4r vad Google, din webbl\u00e4sare och all annan programvara kommer att se n\u00e4r den bes\u00f6ker din webbplats. Det \u00e4r koden som din webbl\u00e4sare \u00e5terger till en webbplats som du kan interagera med.<\/p>\n Det \u00e4r viktigt att f\u00f6rst\u00e5 att varje sida p\u00e5 din webbplats \u00e4r gjord av HTML som denna.<\/p>\n \u00c4ven om det \u00e4r coolt att se koden bakom webbplatsen, finns det ett b\u00e4ttre och mer anv\u00e4ndbart s\u00e4tt f\u00f6r oss att se den.<\/p>\n G\u00e5 tillbaka till din startsida, h\u00f6gerklicka p\u00e5 valfri del av sidan och v\u00e4lj den h\u00e4r g\u00e5ngen alternativet "Inspektera" (det kan st\u00e5 "Inspektera element"). Detta \u00f6ppnar din webbl\u00e4sares utvecklarverktyg och presenterar ett f\u00f6nster s\u00e5 h\u00e4r:<\/p>\n Detta \u00e4r ett annat s\u00e4tt att visa samma HTML som du precis s\u00e5g n\u00e4r du tittade p\u00e5 k\u00e4llkoden. Skillnaden \u00e4r att vi nu har en hierarki vi kan navigera och interagera med.<\/p>\n Om allt detta ser konstigt och \u00f6verv\u00e4ldigande ut \u00e4r det okej. M\u00e5let h\u00e4r \u00e4r inte att bem\u00e4stra din webbl\u00e4sares utvecklarverktyg, det \u00e4r att hitta en CSS-v\u00e4ljare p\u00e5 webbplatsen.<\/p>\n I dina utvecklarverktyg finns det en v\u00e4nstersida och en h\u00f6gersida. Den v\u00e4nstra sidan har en hierarki av HTML som vi kan navigera i. Du kan ignorera h\u00f6gersidan helt.<\/p>\n Nu, om du h\u00e5ller musen \u00f6ver HTML-elementen i utvecklarverktygen, kommer du att m\u00e4rka n\u00e5got riktigt coolt. Varje element markeras p\u00e5 sidan n\u00e4r du h\u00e5ller muspekaren \u00f6ver den.<\/p>\n Detta g\u00f6r det enkelt att komma till det element du vill ha. Faktum \u00e4r att du inte riktigt beh\u00f6ver f\u00f6rst\u00e5 HTML f\u00f6r att hitta elementet du letar efter.<\/p>\n Det finns tv\u00e5 s\u00e4tt att snabbt komma direkt till det element du beh\u00f6ver rikta in dig p\u00e5.<\/p>\n L\u00e5t oss s\u00e4ga att jag beh\u00f6ver komma till en l\u00e4nk i min paginering. Jag kan h\u00f6gerklicka n\u00e5gonstans p\u00e5 sidan och sedan anv\u00e4nda rullgardinsmenyn f\u00f6r att ta mig till l\u00e4nken.<\/p>\n Varje g\u00e5ng jag klickar p\u00e5 en pil avsl\u00f6jar den elementen som finns i det elementet. Detta kr\u00e4vs ofta, men n\u00e4sta metod kan vara \u00e4nnu enklare och snabbare.<\/p>\n Ibland kan du v\u00e4lja exakt det element du vill ha. F\u00f6r att g\u00f6ra detta, h\u00f6gerklicka p\u00e5 elementet och utvecklarverktygen \u00f6ppnas redan och markerar det elementet.<\/p>\n S\u00e5 h\u00e4r navigerar du till samma pagineringsl\u00e4nk med den h\u00e4r snabbare metoden.<\/p>\n N\u00e4r du har hittat HTML-elementet du letar efter \u00e4r det sista steget att kopiera CSS-v\u00e4ljaren<\/a>.<\/p>\n P\u00e5 sk\u00e4rmdumpen nedan kan du se att jag sv\u00e4var \u00f6ver l\u00e4nken sida tv\u00e5.<\/p>\nVisa din webbplats HTML<\/h3>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nF\u00e5 en b\u00e4ttre bild av HTML<\/h3>\n
Navigera i HTML<\/h3>\n
Metod 1: Navigera med pilarna<\/h4>\n
Metod 2: H\u00f6gerklicka p\u00e5 elementet<\/h4>\n
Skaffa CSS-v\u00e4ljaren<\/h3>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n