CSS-väljare är ryggraden i alla snygga webbsidor. De riktar in sig på HTML-element på dina sidor, så att du kan lägga till stilar baserat på deras id, klass, typ, attribut och mer. Den här guiden kommer att fördjupa sig i krångligheterna hos CSS-väljare och deras avgörande roll för att förbättra estetiken och användarupplevelsen på dina webbsidor.
Typer av CSS-väljare
CSS-väljare finns i olika typer, var och en med sitt unika sätt att välja HTML-element. Låt oss utforska dem:
| CSS-väljare | Beskrivning |
|---|---|
Enkla väljare | Den används för att välja HTML-element baserat på deras elementnamn, id, attribut, etc |
| Universalväljare | Markerar alla element på sidan. |
| Attributväljare | Inriktar element baserat på deras attributvärden. |
| Pseudo-klassväljare | Väljer element baserat på deras tillstånd eller position, som t.ex:hover>för svävningseffekter. |
| Kombinatorväljare | Kombinera väljare för att ange relationer mellan element, som ättlingar (>) eller barn (>>). |
| Pseudo-elementväljare | Väljer specifika delar av ett element, som t.ex::before>eller::after>. |
Innehållsförteckning
- CSS-väljartyper
- Enkla väljare
- Elementväljare
- Id-väljare
- Klassväljare
- Universalväljare
- Gruppväljare
- Attributväljare
- Pseudo-klassväljare
- Pseudo-elementväljare
Enkla väljare
Enkla väljare innehåller nedanstående klasser.
| Enkel väljare | Beskrivning |
|---|---|
| Elementväljare | Väljer HTML-element baserat på deras taggnamn. |
| Id-väljare | Riktar in ett HTML-element med ett specifikt id-attribut. |
| Klassväljare | Väljer element med ett visst klassattribut. |
Exempel: I det här exemplet kommer vi att skriva koden för att förstå väljare och deras användning på ett bättre sätt.
HTML CSS Selectorstitel><link rel='stylesheet' href='style.css' />huvud> <body> <h1>Exempel Rubrikh1><p>Detta är innehållet i första stycket p><div id='div-container'>Detta är en div med id div-container div><p>Detta är ett stycke med klassen paragraf-klass p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Vi kommer att tillämpa CSS-regler på ovanstående exempel.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='element-selector'> <b> <strong>Elementväljare</strong> </b> </h2><p dir='ltr'><span>De</span> <span>elementväljare</span> <span>väljer HTML-element baserat på elementnamnet (eller taggen) till exempel p, h1, div, span, etc.</span></p> <p dir='ltr'> <b> <strong>NOTERA :</strong> </b> <span>Följande kod används i exemplet ovan. Du kan se CSS-reglerna som tillämpas på alla</span> <span></span></p><p> <span>taggar och</span></p><h1>taggar.<p></p> </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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Väljare-Exempel-utgång"><p>Utdata för CSS-elementväljare</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>Id-väljare</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>id-väljare</strong> </b> <span>använder</span> <i> <em>id-attribut</em> </i> <span>av ett HTML-element för att välja ett specifikt element.</span> <b> <strong> </strong> </b> <span>En</span> <b> <strong>id</strong> </b> <span>av elementet är unikt på en sida att använda</span> <b> <strong>id</strong> </b> <span>väljare.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Följande kod används i exemplet ovan med hjälp av id-väljaren.</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>Produktion:</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-väljare-exempel-utgång"><p>CSS ID Selectors exempelutdata</p> <h2 id='class-selector'> <b> <strong>Klassväljare</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>klassväljare</strong> </b> <span>väljer HTML-element med ett specifikt klassattribut.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Följande kod används i exemplet ovan med hjälp av klassväljaren. För att använda en klassväljare måste du använda ( . ) följt av klassnamn i CSS. Denna regel kommer att tillämpas på HTML-elementet med class-attributet</span> <i> <em>stycke-klass</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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Klass-Väljare-Exempel-Utdata"><p>Exempel på utdata för CSS-klassväljare</p> <h2 id='universal-selector'> <b> <strong>Universalväljare</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Universalväljare</span> <span>(*) i CSS används för att välja alla element i ett HTML-dokument. Det inkluderar även andra element som finns inuti under ett annat element.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Följande kod används i exemplet ovan med den universella väljaren. Denna CSS-regel kommer att tillämpas på varje HTML-element på sidan:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universell-Väljare-Exempel-Utdata"><p>CSS Universal Selector Exempel på utdata</p> <h2 id='group-selector'> <b> <strong>Gruppväljare</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>Gruppväljare</strong> </b> <span>används för att utforma alla kommaseparerade element med samma stil.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Anta att du vill tillämpa vanliga stilar på olika väljare, istället för att skriva regler separat kan du skriva dem i grupper som visas nedan.</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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Grupp-Väljare-Exempel-Utdata"><p>Exempel på CSS-gruppväljare</p> <h2 id='attribute-selector'> <b> <strong>Attributväljare</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>attributväljare</strong> </b> <span>[attribut] används för att välja elementen med ett specificerat attribut eller attributvärde.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-math-class">java matematik</a>
</blockquote> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Följande kod används i exemplet ovan med hjälp av attributväljaren. Denna CSS-regel kommer att tillämpas på varje HTML-element på sidan:</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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribute-Selectros-Example-Output"><p>CSS Attribut Selectros Exempel utdata</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudo-klassväljare</strong> </b> </h2><p dir='ltr'><span>Den används för att utforma en speciell typ av tillstånd för alla element. Till exempel- Det används för att utforma ett element när en muspekare svävar över det.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Vi använder ett enda kolon(:) i fallet med en</span> <span>Pseudo-klassväljare</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntax:</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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-väljare-exempel-utgång"><p>CSS Pseudo Selector Exempel utdata</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudo-elementväljare</strong> </b> </h2><p dir='ltr'><span>Den används för att styla någon specifik del av elementet. Till exempel- Den används för att utforma den första bokstaven eller den första raden i ett element.</span></p> <p dir='ltr'> <b> <strong>Notera:</strong> </b> <span>Vi använder ett dubbelt kolon(::) i fallet med en</span> <span>Pseudo-elementväljare</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntax:</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>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Väljare-Exempel-Utdata"><p>CSS Pseudo-Element Selector Exempel på utdata</p> <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="/dbms-indexing/">Dbms-Indexering</a> </li><li> <a href="/cash-app-queries/">Cash App - Frågor</a> </li><li> <a href="/java-constructors/">Java-Konstruktörer</a> </li><li> <a href="/mysql/">Mysql</a> </li><li> <a href="/counting-sort/">Räkne-Sort</a> </li><li> <a href="/java-system-class/">Java Systemklass</a> </li><li> <a href="/c-algorithm/">C++ Algoritm</a> </li><li> <a href="/geometry-maq/">Geometri - Maq</a> </li><li> <a href="/javascript-array/">Javascript-Array</a> </li><li> <a href="/greedy/">Girig</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Cartooning en bild med OpenCV - Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Cartooning En bild förvandlar ett normalt foto till en rolig, animerad bild. Med OpenCV gör vi detta genom att jämna ut bilden för att förenkla färger och upptäcka kanter för att skapa konturer. Att kombinera dessa steg gör att fotot ser ut som en tecknad film.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/cartooning-an-image-using-opencv-python"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sembi-movie-review">Sembi filmrecension</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tom-cruise-net-worth-highest-paid-actor-world">Tom Cruise Net Worth – bäst betalda skådespelare i världen (2024)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-iterate-list-java">Hur man itererar listan i Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-string-strip">Python sträng | remsa()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-copy-your-high-school-diploma-131102">Hur man får en kopia av ditt gymnasieexamen: 2 scenarier</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/python-string-rstrip-method">python rstrip</a>
</li><li><a href="/java-convert-char-string">hur man konverterar char till string java</a>
</li><li><a href="/java-string-contains">sträng innehåller java</a>
</li><li><a href="/javascript-operators">javascript-operatorer</a>
</li><li><a href="/objects-classes-java">objekt för java</a>
</li><li><a href="/java-math-pow-method">math.pow java</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 Alla Rättigheter Förbehållna | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>