CSS-selectors vormen de ruggengraat van elke stijlvolle webpagina. Ze richten zich op HTML-elementen op uw pagina's, waardoor u stijlen kunt toevoegen op basis van hun ID, klasse, type, attribuut en meer. Deze gids gaat in op de fijne kneepjes van CSS-selectors en hun cruciale rol bij het verbeteren van de esthetiek en gebruikerservaring van uw webpagina's.
Soorten CSS-kiezers
CSS-selectors zijn er in verschillende typen, elk met zijn unieke manier om HTML-elementen te selecteren. Laten we ze verkennen:
| CSS-kiezers | Beschrijving |
|---|---|
Eenvoudige selectors | Het wordt gebruikt om de HTML-elementen te selecteren op basis van hun elementnaam, ID, attributen, enz |
| Universele selector | Selecteert alle elementen op de pagina. |
| Kenmerkkiezer | Richt zich op elementen op basis van hun attribuutwaarden. |
| Pseudoklassekiezer | Selecteert elementen op basis van hun staat of positie, zoals:hover>voor hover-effecten. |
| Combinator-kiezers | Combineer selectors om relaties tussen elementen op te geven, zoals onderliggende elementen (>) of kind (>>). |
| Pseudo-elementkiezer | Selecteert specifieke delen van een element, zoals::before>of::after>. |
Inhoudsopgave
- Typen CSS-kiezers
- Eenvoudige selectors
- Elementkiezer
- ID-kiezer
- Klassenkiezer
- Universele selector
- Groepkiezer
- Kenmerkkiezer
- Pseudoklassekiezer
- Pseudo-elementkiezer
Eenvoudige selectors
Eenvoudige selectors bevatten de onderstaande klassen.
| Eenvoudige selectie | Beschrijving |
|---|---|
| Elementkiezer | Selecteert HTML-elementen op basis van hun tagnamen. |
| ID-kiezer | Richt zich op een HTML-element met een specifiek id-attribuut. |
| Klassenkiezer | Selecteert elementen met een bepaald klasse-attribuut. |
Voorbeeld: In dit voorbeeld zullen we de code schrijven om selectors en hun gebruik beter te begrijpen.
HTML CSS-kiezertitel><link rel='stylesheet' href='style.css' />hoofd> <body> <h1>Voorbeeldkoph1><p>Dit is inhoud in de eerste alineap><div id='div-container'>Dit is een div met id div-container div><p>Dit is een paragraaf met klasse paragraaf-klasse p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We zullen CSS-regels toepassen op het bovenstaande voorbeeld.</span></p> <h2 id='element-selector'> <b> <strong>Elementkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <span>elementkiezer</span> <span>selecteert HTML-elementen op basis van de elementnaam (of tag), bijvoorbeeld p, h1, div, span, enz.</span></p> <p dir='ltr'> <b> <strong>OPMERKING :</strong> </b> <span>In het bovenstaande voorbeeld wordt de volgende code gebruikt. U kunt zien dat de CSS-regels op iedereen zijn toegepast</span> <span></span></p><p> <span>tags en</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-split-strings-c">c++ splitsreeks</a>
</blockquote><h1>labels.<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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Voorbeeld-uitvoer"><p>Uitvoer van CSS-elementselector</p> <h2 id='id-selector'> <b> <strong>ID-kiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>ID-kiezer</strong> </b> <span>maakt gebruik van de</span> <i> <em>ID-attribuut</em> </i> <span>van een HTML-element om een specifiek element te selecteren.</span> <b> <strong> </strong> </b> <span>Een</span> <b> <strong>ID kaart</strong> </b> <span>van het element is uniek om op een pagina te gebruiken</span> <b> <strong>het ID</strong> </b> <span>keuzeschakelaar.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de id-selector.</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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="CSS-Id-selectors-voorbeeld-uitvoer"><p>CSS ID Selectors voorbeelduitvoer</p> <h2 id='class-selector'> <b> <strong>Klassenkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>klassenkiezer</strong> </b> <span>selecteert HTML-elementen met een specifiek klasse-attribuut.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de klassenkiezer. Om een klassenkiezer te gebruiken, moet u ( . ) gevolgd door de klassenaam in CSS gebruiken. Deze regel wordt toegepast op het HTML-element met het class-attribuut</span> <i> <em>paragraaf-klasse</em> </i> <span></span></p> <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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Klasse-Selectors-Voorbeeld-Uitvoer"><p>CSS-klassekiezer Voorbeelduitvoer</p> <h2 id='universal-selector'> <b> <strong>Universele selector</strong> </b> </h2><p dir='ltr'><span>De</span> <span>Universele keuzeschakelaar</span> <span>(*) in CSS wordt gebruikt om alle elementen in een HTML-document te selecteren. Het bevat ook andere elementen die zich onder een ander element bevinden.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de universele selector. Deze CSS-regel wordt toegepast op elk HTML-element op de pagina:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universele-Selector-Voorbeeld-Uitvoer"><p>CSS Universal Selector Voorbeelduitvoer</p> <h2 id='group-selector'> <b> <strong>Groepkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>Groepkiezer</strong> </b> <span>wordt gebruikt om alle door komma's gescheiden elementen in dezelfde stijl op te maken.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>Stel dat u gemeenschappelijke stijlen wilt toepassen op verschillende selectors, in plaats van regels afzonderlijk te schrijven, kunt u ze in groepen schrijven, zoals hieronder weergegeven.</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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Groep-Selector-Voorbeeld-Uitvoer"><p>CSS-groepkiezer Voorbeelduitvoer</p> <h2 id='attribute-selector'> <b> <strong>Kenmerkkiezer</strong> </b> </h2><p dir='ltr'><span>De</span> <b> <strong>attribuutkiezer</strong> </b> <span>[attribuut] wordt gebruikt om de elementen met een opgegeven attribuut of attribuutwaarde te selecteren.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>De volgende code wordt in het bovenstaande voorbeeld gebruikt met behulp van de attribuutselector. Deze CSS-regel wordt toegepast op elk HTML-element op de pagina:</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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribuut-Selectros-Voorbeeld-Uitvoer"><p>CSS-attribuut Selectros Voorbeelduitvoer</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudoklassekiezer</strong> </b> </h2><p dir='ltr'><span>Het wordt gebruikt om een speciaal type status van elk element te stylen. Bijvoorbeeld: het wordt gebruikt om een element op te maken als de muiscursor erover beweegt.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We gebruiken een enkele dubbele punt(:) in het geval van a</span> <span>Pseudoklassekiezer</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-Selector-Voorbeeld-Uitvoer"><p>CSS Pseudo Selector Voorbeelduitvoer</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudo-elementkiezer</strong> </b> </h2><p dir='ltr'><span>Het wordt gebruikt om elk specifiek deel van het element te stylen. Bijvoorbeeld: het wordt gebruikt om de eerste letter of de eerste regel van een element op te maken.</span></p> <p dir='ltr'> <b> <strong>Opmerking:</strong> </b> <span>We gebruiken een dubbele dubbele punt(::) in het geval van a</span> <span>Pseudo-elementkiezer</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaxis:</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>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Selector-Voorbeeld-Uitvoer"><p>CSS Pseudo-Element Selector Voorbeelduitvoer</p> <p dir='ltr'> <br></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/online-game-tools/">Online-Game-Tools</a> </li><li> <a href="/counting-sort/">Tellen-Sorteren</a> </li><li> <a href="/microservices-tutorial/">Microservices-Zelfstudie</a> </li><li> <a href="/sql/">SQL</a> </li><li> <a href="/data-structures/">Data Structuren</a> </li><li> <a href="/macos-tricks/">Macos-Trucs</a> </li><li> <a href="/summary/">Samenvatting</a> </li><li> <a href="/maven-tutorial/">Maven-Zelfstudie</a> </li><li> <a href="/pyspark-tutorial/">Pyspark-Zelfstudie</a> </li><li> <a href="/groovy-tutorial/">Groovy-Tutorial</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Gelijktijdig samenvoegen sorteren in gedeeld geheugen</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Gegeven een getal 'n' en een n getal, sorteert u de getallen met Concurrent Merge Sort. (Hint: probeer shmget en shmat systeemaanroepen te gebruiken). Deel 1: Het algoritme (HOE?) Maak recursief twee onderliggende processen, één voor de linkerhelft en één voor de rechterhelft. Als het aantal elementen in de array voor een proces minder dan 5 is, voert u een invoegsortering uit. De ouder van de twee kinderen voegt vervolgens het resultaat samen en keert terug naar de ouder, enzovoort. Maar hoe zorg je ervoor dat het gelijktijdig is? Deel 2: Het logische (WAAROM?) Het belangrijke deel van de oplossing voor dit probleem is niet algoritmisch, maar het uitleggen van de concepten van het besturingssysteem en de kernel. Om gelijktijdig sorteren te bereiken, hebben we een manier nodig om twee processen tegelijkertijd op dezelfde array te laten werken. Om het eenvoudiger te maken, biedt Linux veel systeemaanroepen via eenvoudige API-eindpunten. Twee daarvan zijn shmget() (voor gedeelde geheugentoewijzing) en shmat() (voor gedeelde geheugenbewerkingen). We creëren een gedeelde geheugenruimte tussen het kindproces dat we afsplitsen. Elk segment is opgesplitst in een linker- en rechterkind en wordt gesorteerd. Het interessante is dat ze tegelijkertijd werken! De shmget() vraagt de kernel om een gedeelde pagina toe te wijzen voor beide processen. Waarom werkt traditionele fork() niet? Het antwoord ligt in wat fork() feitelijk doet. Uit de documentatie blijkt dat 'fork() een nieuw proces creëert door het aanroepende proces te dupliceren'. Het onderliggende proces en het bovenliggende proces worden in afzonderlijke geheugenruimten uitgevoerd. Op het moment van fork() hebben beide geheugenruimten dezelfde inhoud. Geheugenschrijfbewerkingen, bestandsdescriptor(fd)-wijzigingen, enz., uitgevoerd door een van de processen, hebben geen invloed op de andere. Daarom hebben we een gedeeld geheugensegment nodig.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/concurrent-merge-sort-in-shared-memory"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/operating-system-tutorial">Handleiding voor besturingssysteem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/if-poem-rudyard-kipling-summary-line-line-explanation-english">Als gedicht van Rudyard Kipling Samenvatting en regel voor regel uitleg in het Engels</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-include">C #opnemen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-utp">Verschil tussen UTP en STP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nth-fibonacci-number">N-de Fibonacci-getal</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/how-read-csv-file-java">lezen uit een csv-bestand in Java</a>
</li><li><a href="/camelcase-python">camelcase python</a>
</li><li><a href="/public-vs-private-java">privé versus openbaar Java</a>
</li><li><a href="/typescript-date-object">typoscript datum tijd</a>
</li><li><a href="/array-slicing-java">slice Java-array</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 Rechten Voorbehouden | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>