CSS atlasītāji ir jebkuras stilīgas tīmekļa lapas mugurkauls. Tie atlasa HTML elementus jūsu lapās, ļaujot pievienot stilus, pamatojoties uz to ID, klasi, veidu, atribūtu un citiem. Šajā rokasgrāmatā tiks aplūkotas CSS atlasītāju sarežģītības un to galvenā loma jūsu tīmekļa lapu estētikas un lietotāja pieredzes uzlabošanā.
CSS atlasītāju veidi
CSS atlasītājiem ir dažādi veidi, un katram ir savs unikāls veids, kā atlasīt HTML elementus. Izpētīsim tos:
| CSS atlasītāji | Apraksts |
|---|---|
Vienkārši atlasītāji | To izmanto, lai atlasītu HTML elementus, pamatojoties uz to elementa nosaukumu, ID, atribūtiem utt |
| Universālais selektors | Atlasa visus lapas elementus. |
| Atribūtu atlasītājs | Atlasa mērķauditoriju elementos, pamatojoties uz to atribūtu vērtībām. |
| Pseidoklases atlasītājs | Atlasa elementus, pamatojoties uz to stāvokli vai pozīciju, piemēram,:hover>lidināšanās efektiem. |
| Kombinatoru selektori | Apvienojiet atlasītājus, lai norādītu attiecības starp elementiem, piemēram, pēcnācējus (>) vai bērns (>>>). |
| Pseidoelementu atlasītājs | Atlasa noteiktas elementa daļas, piemēram, |
Satura rādītājs
- CSS atlasītāju veidi
- Vienkārši atlasītāji
- Elementu atlasītājs
- ID atlasītājs
- Klases atlasītājs
- Universālais selektors
- Grupas atlasītājs
- Atribūtu atlasītājs
- Pseidoklases atlasītājs
- Pseidoelementu atlasītājs
Vienkārši atlasītāji
Vienkāršajos atlasītājos ir ietvertas tālāk norādītās klases.
| Vienkāršs atlasītājs | Apraksts |
|---|---|
| Elementu atlasītājs | Atlasa HTML elementus, pamatojoties uz to tagu nosaukumiem. |
| ID atlasītājs | Atlasa mērķauditoriju pēc HTML elementa ar noteiktu id atribūtu. |
| Klases atlasītājs | Atlasa elementus ar noteiktu klases atribūtu. |
Piemērs: Šajā piemērā mēs rakstīsim kodu, lai labāk izprastu atlasītājus un to lietojumus.
HTML CSS atlasītāja virsraksts><link rel='stylesheet' href='style.css' />galva> <body> <h1>Paraugs Headingh1><p>Šis ir saturs pirmajā rindkopāp><div id='div-container'>Šis ir div ar id div-container div><p>Šī ir rindkopa ar klasi paragrāfs-klase p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Mēs piemērosim CSS noteikumus iepriekšminētajam piemēram.</span></p> <h2 id='element-selector'> <b> <strong>Elementu atlasītājs</strong> </b> </h2><p dir='ltr'><span>The</span> <span>elementu atlasītājs</span> <span>atlasa HTML elementus, pamatojoties uz elementa nosaukumu (vai tagu), piemēram, p, h1, div, span utt.</span></p> <p dir='ltr'> <b> <strong>PIEZĪME :</strong> </b> <span>Iepriekš minētajā piemērā tiek izmantots šāds kods. Varat redzēt visiem piemērotos CSS noteikumus</span> <span></span></p><p> <span>tagus un</span></p><h1>tagus.<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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Example-output"><p>CSS elementu atlasītāja izvade</p> <h2 id='id-selector'> <b> <strong>ID atlasītājs</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>id atlasītājs</strong> </b> <span>izmanto</span> <i> <em>id atribūts</em> </i> <span>HTML elementu, lai atlasītu konkrētu elementu.</span> <b> <strong> </strong> </b> <span>An</span> <b> <strong>id</strong> </b> <span>elements ir unikāls izmantojamajā lapā</span> <b> <strong>id</strong> </b> <span>atlasītājs.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/binary-tree">bināro koku veidi</a>
</blockquote> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot id atlasītāju.</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="CSS-Id-selectors-example-output"><p>CSS ID atlasītāju piemēra izvade</p> <h2 id='class-selector'> <b> <strong>Klases atlasītājs</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>klases atlasītājs</strong> </b> <span>atlasa HTML elementus ar noteiktu klases atribūtu.</span></p> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot klases atlasītāju. Lai izmantotu klases atlasītāju, CSS ir jāizmanto (. ), kam seko klases nosaukums. Šis noteikums tiks piemērots HTML elementam ar klases atribūtu</span> <i> <em>rindkopu klase</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-klase-selektori-piemērs-izvade"><p>CSS klases atlasītāja piemēra izvade</p> <h2 id='universal-selector'> <b> <strong>Universālais selektors</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Universāls selektors</span> <span>(*) CSS izmanto, lai atlasītu visus elementus HTML dokumentā. Tas ietver arī citus elementus, kas atrodas zem cita elementa.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/ubuntu-build-essential">kas ir build-essential ubuntu</a>
</blockquote> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot universālo selektoru. Šī CSS kārtula tiks piemērota katram lapas HTML elementam:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universal-Selector-Example-Output"><p>CSS universālā atlasītāja izvades piemērs</p> <h2 id='group-selector'> <b> <strong>Grupas atlasītājs</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>Grupas atlasītājs</strong> </b> <span>tiek izmantots, lai visus ar komatu atdalītos elementus veidotu vienā stilā.</span></p> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Pieņemsim, ka vēlaties piemērot kopīgus stilus dažādiem atlasītājiem, tā vietā, lai rakstītu noteikumus atsevišķi, varat tos rakstīt grupās, kā parādīts tālāk.</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Group-Selector-Example-Output"><p>CSS grupas atlasītāja piemēra izvade</p> <h2 id='attribute-selector'> <b> <strong>Atribūtu atlasītājs</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>atribūtu atlasītājs</strong> </b> <span>[atribūts] tiek izmantots, lai atlasītu elementus ar noteiktu atribūtu vai atribūta vērtību.</span></p> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Iepriekš minētajā piemērā tiek izmantots šāds kods, izmantojot atribūtu atlasītāju. Šī CSS kārtula tiks piemērota katram lapas HTML elementam:</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Atribūts-Selectros-Piemērs-Izvade"><p>CSS atribūtu atlases piemēra izvade</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseidoklases atlasītājs</strong> </b> </h2><p dir='ltr'><span>To izmanto, lai veidotu jebkura elementa īpaša veida stāvokli. Piemēram, to izmanto elementa stila veidošanai, kad peles kursors atrodas virs tā.</span></p> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Mēs izmantojam vienu kolu (:) a gadījumā</span> <span>Pseidoklases atlasītājs</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintakse:</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-pseido-selektora-piemēra-izvade"><p>CSS pseido selektora piemēra izvade</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseidoelementu atlasītājs</strong> </b> </h2><p dir='ltr'><span>To izmanto, lai veidotu jebkuru konkrētu elementa daļu. Piemēram, to izmanto jebkura elementa pirmā burta vai pirmās rindas veidošanai.</span></p> <p dir='ltr'> <b> <strong>Piezīme:</strong> </b> <span>Mēs izmantojam dubulto kolu (::) a gadījumā</span> <span>Pseidoelementu atlasītājs</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintakse:</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>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseido-Element-Selector-Example-Output"><p>CSS pseidoelementu atlasītāja piemēra izvade</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="//spiritscaution.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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/javascript-date/">Javascript-Date</a> </li><li> <a href="/algorithms-misc/">Algoritmi — Dažādi</a> </li><li> <a href="/geography-class-8-cat/">Ģeogrāfija-8. Klase</a> </li><li> <a href="/vba-tutorial/">Vba Apmācība</a> </li><li> <a href="/python-tutorial/">Python Apmācība</a> </li><li> <a href="/commerce-12th/">Tirdzniecība - 12</a> </li><li> <a href="/data-mining/">Datu Ieguve</a> </li><li> <a href="/tcs/">Tcs</a> </li><li> <a href="/graph-theory-tutorial/">Grafiku Teorijas Apmācība</a> </li><li> <a href="/physics-calculators/">Fizika-Kalkulatori</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Divja Bharti</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Divja Bharti: biogrāfija, vecums ar māti Terēzi, Narendra Modi, Mahatma Gandijs, Amitabs Bahčāns, Humajuns, Mangala Pandija biogrāfija utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/divya-bharti"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python/">Pitons</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sum-of-all-numbers-that-can-be-formed-with-permutations-of-n-digits">Visu skaitļu summa, ko var izveidot ar n ciparu permutācijām</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-concatenate-two-strings-golang">Dažādi veidi, kā savienot divas virknes Golangā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-dijkstra-s-algorithm">Kas ir Dijkstras algoritms? | Ievads Dijkstra īsākā ceļa algoritmā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/roman-number-1-100">Romiešu numurs 1 līdz 100</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ārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/roman-number-1-100">romiešu skaitļi no 1 līdz 100</a>
</li><li><a href="/bash-check-if-variable-is-set">bash pārbaudiet, vai ir iestatīts vides mainīgais</a>
</li><li><a href="/where-is-address-bar-chrome">hroma adreses josla</a>
</li><li><a href="/sql-cast-function">cast sql</a>
</li><li><a href="/java-convert-string-int">java kā pārvērst virkni par int</a>
</li><li><a href="/pojo">poo</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 Visas Tiesības Aizsargātas | <a href="//it.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika</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>