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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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><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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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> <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>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><!--//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="/computer-networks-network-layer/">Datortīkli-Tīkla Slānis</a> </li><li> <a href="/java-advanced/">Java-Advanced</a> </li><li> <a href="/pytorch-tutorial/">Pytorch Apmācība</a> </li><li> <a href="/computer-organization/">Datoru Organizācija Un Arhitektūra</a> </li><li> <a href="/blog/">Emuārs</a> </li><li> <a href="/tree/">Koks</a> </li><li> <a href="/dynamic-programming/">Dinamiska programmēšana</a> </li><li> <a href="/shell/">Apvalks</a> </li><li> <a href="/python-numpy-io/">Python Numpy-Io</a> </li><li> <a href="/inorder-traversal/">Pasūtījuma Šķērsošana</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Lielākās summas blakus esošais apakšgrupas (Kadane algoritms)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Maksimālā blakusesošo apakšgrupu summa viendimensijas skaitļu masīvā, izmantojot Kadanes algoritmu</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/largest-sum-contiguous-subarray"> <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="/gta-5-cat/">Gta 5</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/integers-definition">Veseli skaitļi — definīcija, rekvizīti un darblapa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/two-truths-lie-131264">Divas patiesības un meli: 35 labi meli citu apmānīšanai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/why-java-is-popular">Kāpēc Java ir tik populāra?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-convert-double-string">Java konvertēt dubultā uz virkni</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="/123movie-alternatives">filmas123 līdz</a>
</li><li><a href="/java-string-compareto">java salīdzināšanas metode</a>
</li><li><a href="/npm-clear-cache">notīrīt kešatmiņu npm</a>
</li><li><a href="/java-arraylist">java masīvu saraksta metodes</a>
</li><li><a href="/tree-traversal-inorder">koku šķērsošana</a>
</li><li><a href="/how-open-file-java">java atvērts fails</a>
</li><li><a href="/javascript-global-variable">js globālais mainīgais</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="//lv.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>