CSS-velgere er ryggraden i enhver stilig nettside. De målretter HTML-elementer på sidene dine, slik at du kan legge til stiler basert på deres id, klasse, type, attributt og mer. Denne guiden vil fordype seg i detaljene til CSS-velgere og deres sentrale rolle i å forbedre estetikken og brukeropplevelsen til nettsidene dine.
Typer CSS-velgere
CSS-velgere kommer i forskjellige typer, hver med sin unike måte å velge HTML-elementer på. La oss utforske dem:
| CSS-velgere | Beskrivelse |
|---|---|
Enkle velgere | Den brukes til å velge HTML-elementer basert på elementnavn, id, attributter osv |
| Universalvelger | Velger alle elementene på siden. |
| Attributtvelger | Målretter mot elementer basert på deres attributtverdier. |
| Pseudo-klassevelger | Velger elementer basert på deres tilstand eller posisjon, som f.eks:hover>for sveveeffekter. |
| Kombinatorvelgere | Kombiner velgere for å spesifisere relasjoner mellom elementer, for eksempel etterkommere (>) eller barn (>>). |
| Pseudo-elementvelger | Velger spesifikke deler av et element, som f.eks::before>eller::after>. |
Innholdsfortegnelse
- CSS-velgertyper
- Enkle velgere
- Elementvelger
- ID-velger
- Klassevelger
- Universalvelger
- Gruppevelger
- Attributtvelger
- Pseudo-klassevelger
- Pseudo-elementvelger
Enkle velgere
Enkle velgere inneholder klassene nedenfor.
| Enkel velger | Beskrivelse |
|---|---|
| Elementvelger | Velger HTML-elementer basert på tagnavnene deres. |
| ID-velger | Målretter mot et HTML-element med et spesifikt id-attributt. |
| Klassevelger | Velger elementer med et bestemt klasseattributt. |
Eksempel: I dette eksemplet vil vi skrive koden for å forstå velgere og deres bruk på en bedre måte.
HTML CSS-velgertittel><link rel='stylesheet' href='style.css' />hodet> <body> <h1>Eksempel Headingh1><p>Dette er innhold i første avsnittp><div id='div-container'>Dette er en div med id div-container div><p>Dette er et avsnitt med klassen avsnitt-klasse p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Vi vil bruke CSS-regler på eksemplet ovenfor.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/sql-cast-function">støpt i sql</a>
</blockquote> <h2 id='element-selector'> <b> <strong>Elementvelger</strong> </b> </h2><p dir='ltr'><span>De</span> <span>elementvelger</span> <span>velger HTML-elementer basert på elementnavnet (eller taggen), for eksempel p, h1, div, span, etc.</span></p> <p dir='ltr'> <b> <strong>MERK :</strong> </b> <span>Følgende kode brukes i eksemplet ovenfor. Du kan se CSS-reglene som gjelder for alle</span> <span></span></p><p> <span>tagger og</span></p><h1>tagger.<p></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/architecture-linux">linux arkitektur</a>
</blockquote> </h1><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Velgere-Eksempel-utgang"><p>CSS Element Selector-utgang</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>ID-velger</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>id-velger</strong> </b> <span>bruker</span> <i> <em>id-attributt</em> </i> <span>av et HTML-element for å velge et spesifikt element.</span> <b> <strong> </strong> </b> <span>An</span> <b> <strong>id</strong> </b> <span>av elementet er unikt på en side som skal brukes</span> <b> <strong>id</strong> </b> <span>velger.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Følgende kode brukes i eksemplet ovenfor ved å bruke id-velgeren.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container{ color: blue; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="CSS-Id-selektorer-eksempel-utgang"><p>CSS ID Selectors eksempel utgang</p> <h2 id='class-selector'> <b> <strong>Klassevelger</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>klassevelger</strong> </b> <span>velger HTML-elementer med et spesifikt klasseattributt.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Følgende kode brukes i eksemplet ovenfor ved å bruke klassevelgeren. For å bruke en klassevelger må du bruke ( . ) etterfulgt av klassenavn i CSS. Denne regelen vil bli brukt på HTML-elementet med klasseattributtet</span> <i> <em>avsnittsklasse</em> </i> <span></span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>.paragraph-class { color:white; font-family: monospace; background-color: purple; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Klasse-Velgere-Eksempel-Utgang"><p>Eksempel på CSS-klassevelger</p> <h2 id='universal-selector'> <b> <strong>Universalvelger</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Universalvelger</span> <span>(*) i CSS brukes til å velge alle elementene i et HTML-dokument. Det inkluderer også andre elementer som er inne under et annet element.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Følgende kode brukes i eksemplet ovenfor ved bruk av den universelle velgeren. Denne CSS-regelen vil bli brukt på hvert eneste HTML-element på siden:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linux-file-system">filsystem i linux</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universal-Velger-Eksempel-Utgang"><p>CSS Universal Selector Eksempel utgang</p> <h2 id='group-selector'> <b> <strong>Gruppevelger</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>Gruppevelger</strong> </b> <span>brukes til å style alle kommaseparerte elementer med samme stil.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Anta at du vil bruke vanlige stiler på forskjellige velgere, i stedet for å skrive regler separat kan du skrive dem i grupper som vist nedenfor.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Gruppe-Velger-Eksempel-Utgang"><p>Eksempel på CSS-gruppevelger</p> <h2 id='attribute-selector'> <b> <strong>Attributtvelger</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>attributtvelger</strong> </b> <span>[attributt] brukes til å velge elementene med en spesifisert attributt eller attributtverdi.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Følgende kode brukes i eksemplet ovenfor ved å bruke attributtvelgeren. Denne CSS-regelen vil bli brukt på hvert eneste HTML-element på siden:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribut-Selectros-Example-Output"><p>CSS Attribut Selectros Eksempel utdata</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudo-klassevelger</strong> </b> </h2><p dir='ltr'><span>Den brukes til å style en spesiell type tilstand av ethvert element. For eksempel- Det brukes til å style et element når en musepeker svever over det.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Vi bruker et enkelt kolon(:) i tilfelle av en</span> <span>Pseudo-klassevelger</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaks:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Class { Property: Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1:hover{ background-color: aqua; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-velger-eksempel-utgang"><p>CSS Pseudo Selector Eksempel utgang</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudo-elementvelger</strong> </b> </h2><p dir='ltr'><span>Den brukes til å style en hvilken som helst spesifikk del av elementet. For eksempel- Den brukes til å style den første bokstaven eller den første linjen i ethvert element.</span></p> <p dir='ltr'> <b> <strong>Merk:</strong> </b> <span>Vi bruker et dobbelt kolon(::) når det gjelder en</span> <span>Pseudo-elementvelger</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaks:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Element{ Property:Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>p::first-line{ background-color: goldenrod; }></pre><p dir='ltr'> <b> <strong>Produksjon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Velger-Eksempel-Utgang"><p>CSS Pseudo-Element Selector Eksempel utgang</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linux-zip-command-with-examples">zip-kommando i linux</a>
</blockquote> <p dir='ltr'> <br></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/algorithms-analysis-algorithms/">Algoritmer-Analyse Av Algoritmer</a> </li><li> <a href="/news/">Nyheter</a> </li><li> <a href="/python-sorting-exercises/">Python Sortering-Øvelser</a> </li><li> <a href="/robotics-tutorial/">Robotikk Opplæring</a> </li><li> <a href="/pandas-tutorial/">Panda-Opplæring</a> </li><li> <a href="/chemical-elements/">Kjemiske-Elementer</a> </li><li> <a href="/linux-directories/">Linux-Kataloger</a> </li><li> <a href="/ms-word-tutorial/">Ms Word Opplæring</a> </li><li> <a href="/arduino-tutorial/">Arduino Veiledning</a> </li><li> <a href="/about-us/">Om Oss</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">jQuery ready() funksjon</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> jQuery ready()-funksjon med jQuery-opplæring, metoder, html og css, egenskaper, eksempler på jQuery-effekter, selectors, traversing, hendelser, manipulasjon, animasjon, html og mer.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/jquery-ready-function"> <i class="fa fa-external-link"></i> Les Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/combinatorial-game-theory-set-4-sprague-grundy-theorem">Combinatorial Game Theory | Sett 4 (Sprague - Grundy Theorem)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/variance">Forskjell</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-clear-cache-windows-10">Hvordan tømme cache i Windows 10?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/understanding-python-pickling-with-example">Forstå Python Pickling med eksempel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/autocad-stretch">AutoCAD Stretch</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populære Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/java-naming-convention">navnekonvensjon java</a>
</li><li><a href="/java-convert-string-char">java-streng til char</a>
</li><li><a href="/what-is-1-1000">1 av 1000</a>
</li><li><a href="/how-delete-file-java">slett filen i java</a>
</li><li><a href="/java-math-pow-method">matematikk pow java</a>
</li><li><a href="/software-development-life-cycle">programvareutvikling livssyklus</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rettigheter Reservert | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>