CSS parinkikliai yra bet kurio stilingo tinklalapio pagrindas. Jie taikomi pagal HTML elementus jūsų puslapiuose, todėl galite pridėti stilių pagal jų ID, klasę, tipą, atributą ir kt. Šiame vadove bus nagrinėjami CSS parinktuvų sudėtingumai ir pagrindinis jų vaidmuo gerinant jūsų tinklalapių estetiką ir naudotojo patirtį.
CSS selektorių tipai
CSS parinkikliai būna įvairių tipų, kurių kiekvienas turi savo unikalų būdą pasirinkti HTML elementus. Panagrinėkime juos:
| CSS selektoriai | apibūdinimas |
|---|---|
Paprasti selektoriai | Jis naudojamas HTML elementams pasirinkti pagal jų elemento pavadinimą, ID, atributus ir kt |
| Universalus selektorius | Parenka visus puslapio elementus. |
| Atributų parinkiklis | Taikoma pagal elementus pagal jų atributų reikšmes. |
| Pseudo klasės parinkiklis | Parenka elementus pagal jų būseną arba padėtį, pvz:hover>užvedimo efektams. |
| Kombinatoriaus selektoriai | Sujunkite parinkiklius, kad nurodytumėte ryšius tarp elementų, pvz., palikuonių (>) arba vaikas (>>>). |
| Pseudoelementų parinkiklis | Parenkamos konkrečios elemento dalys, pvz |
Turinys
- CSS selektorių tipai
- Paprasti selektoriai
- Elementų parinkiklis
- ID parinkiklis
- Klasės parinkėjas
- Universalus selektorius
- Grupės parinkiklis
- Atributų parinkiklis
- Pseudo klasės parinkiklis
- Pseudoelementų parinkiklis
Paprasti selektoriai
Paprastuose selektoriuose yra toliau nurodytos klasės.
| Paprastas parinkiklis | apibūdinimas |
|---|---|
| Elementų parinkiklis | Parenka HTML elementus pagal jų žymų pavadinimus. |
| ID parinkiklis | Taikoma pagal HTML elementą su konkrečiu ID atributu. |
| Klasės parinkėjas | Parenka elementus su tam tikru klasės atributu. |
Pavyzdys: Šiame pavyzdyje parašysime kodą, kad geriau suprastume parinkiklius ir jų naudojimą.
HTML CSS Selectortitle><link rel='stylesheet' href='style.css' />galva> <body> <h1>Pavyzdys Headingh1><p>Tai yra pirmoje pastraipoje esantis turinysp><div id='div-container'>Tai yra div su ID div-container div><p>Tai pastraipa, kurios klasė paragrafas-klasė p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Aukščiau pateiktam pavyzdžiui taikysime CSS taisykles.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='element-selector'> <b> <strong>Elementų parinkiklis</strong> </b> </h2><p dir='ltr'><span>The</span> <span>elementų parinkiklis</span> <span>parenka HTML elementus pagal elemento pavadinimą (arba žymą), pvz., p, h1, div, span ir kt.</span></p> <p dir='ltr'> <b> <strong>PASTABA:</strong> </b> <span>Aukščiau pateiktame pavyzdyje naudojamas šis kodas. Galite pamatyti visiems taikomas CSS taisykles</span> <span></span></p><p> <span>žymos ir</span></p><h1>žymės.<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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Example-output"><p>CSS elementų parinkiklio išvestis</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>ID parinkiklis</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>id parinkiklis</strong> </b> <span>naudoja</span> <i> <em>id atributas</em> </i> <span>HTML elemento, kad pasirinktumėte konkretų elementą.</span> <b> <strong> </strong> </b> <span>An</span> <b> <strong>id</strong> </b> <span>elementas yra unikalus naudojamame puslapyje</span> <b> <strong>id</strong> </b> <span>parinkiklis.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Šis kodas naudojamas aukščiau pateiktame pavyzdyje naudojant id parinkiklį.</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>Išvestis:</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 selektorių pavyzdys išvestis</p> <h2 id='class-selector'> <b> <strong>Klasės parinkėjas</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>klasės parinkėjas</strong> </b> <span>parenka HTML elementus su konkrečiu klasės atributu.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Šis kodas naudojamas aukščiau pateiktame pavyzdyje naudojant klasės parinkiklį. Norėdami naudoti klasės parinkiklį, CSS sistemoje turite naudoti (. ) ir klasės pavadinimą. Ši taisyklė bus taikoma HTML elementui su klasės atributu</span> <i> <em>pastraipos klasė</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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Class-Selectors-Example-Output"><p>CSS klasės parinkiklio išvesties pavyzdys</p> <h2 id='universal-selector'> <b> <strong>Universalus selektorius</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Universalus selektorius</span> <span>(*) CSS naudojamas norint pasirinkti visus HTML dokumento elementus. Tai taip pat apima kitus elementus, esančius viduje po kitu elementu.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Šis kodas naudojamas aukščiau pateiktame pavyzdyje, naudojant universalųjį parinkiklį. Ši CSS taisyklė bus taikoma kiekvienam puslapio HTML elementui:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universal-Selector-Example-Output"><p>CSS universalaus parinkiklio išvesties pavyzdys</p> <h2 id='group-selector'> <b> <strong>Grupės parinkiklis</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>Grupės parinkiklis</strong> </b> <span>naudojamas visiems kableliais atskirtiems elementams stilizuoti tuo pačiu stiliumi.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Tarkime, kad norite taikyti bendrus stilius skirtingiems parinktuvams, užuot rašę taisykles atskirai, galite jas rašyti grupėmis, kaip parodyta toliau.</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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Group-Selector-Example-Output"><p>CSS grupės parinkiklio išvesties pavyzdys</p> <h2 id='attribute-selector'> <b> <strong>Atributų parinkiklis</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>atributų parinkiklis</strong> </b> <span>[atributas] naudojamas norint pasirinkti elementus su nurodytu atributu arba atributo reikšme.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/binary-bcd-code-conversion">bin į bcd</a>
</blockquote> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Šis kodas naudojamas aukščiau pateiktame pavyzdyje naudojant atributo parinkiklį. Ši CSS taisyklė bus taikoma kiekvienam puslapio HTML elementui:</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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Atributas-Selectros-Example-Output"><p>CSS atributo selektorių pavyzdys išvestis</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudo klasės parinkiklis</strong> </b> </h2><p dir='ltr'><span>Jis naudojamas bet kokio elemento specialaus tipo būsenai stilizuoti. Pavyzdžiui, jis naudojamas elemento stiliui sukurti, kai pelės žymeklis užves virš jo.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>A atveju naudojame vieną dvitaškį (:).</span> <span>Pseudo klasės parinkiklis</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-pseudo-selektorius-pavyzdys-išvestis"><p>CSS pseudo selektorių pavyzdys išvestis</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudoelementų parinkiklis</strong> </b> </h2><p dir='ltr'><span>Jis naudojamas kuriant bet kurią konkrečią elemento dalį. Pavyzdžiui, jis naudojamas kuriant bet kurio elemento pirmąją raidę arba pirmąją eilutę.</span></p> <p dir='ltr'> <b> <strong>Pastaba:</strong> </b> <span>Mes naudojame dvigubą dvitaškį (::) a atveju</span> <span>Pseudoelementų parinkiklis</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaksė:</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>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-pseudo-elementas-selektorius-pavyzdys-išvestis"><p>CSS pseudoelementų pasirinkimo pavyzdžio išvestis</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="/es6-tutorial/">Es6 Pamoka</a> </li><li> <a href="/angular-material/">Kampinė Medžiaga</a> </li><li> <a href="/image-processing/">Vaizdo Apdorojimas</a> </li><li> <a href="/accolite/">Akolitas</a> </li><li> <a href="/python-loop-programs/">Python Kilpos Programos</a> </li><li> <a href="/git-tutorial/">Git Pamoka</a> </li><li> <a href="/python-requests/">Python Užklausos</a> </li><li> <a href="/sql-server-tutorials/">Sql Serverio Vadovėliai</a> </li><li> <a href="/compiler-tutorial/">Kompiliatoriaus Pamoka</a> </li><li> <a href="/osi/">Taip Pat</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Paaiškinta: kas yra grobio dėžutės?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Grobio dėžutės yra paslaptingi virtualių daiktų, susijusių su vaizdo žaidimu, rinkiniai. Juos žaidėjas gali laimėti kaip atlygį arba jas įsigyti.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/explained-what-are-loot-boxes-24256"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-pandas-melt">Python | Pandos.melt()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/vector-projection-formula">Vektorinė projekcija – formulė, išvedimas ir pavyzdžiai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-string-match-method">„JavaScript“ eilutės atitikties() metodas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/svn-checkout">SVN patikra</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/multidimensional-arrays-java">Daugiamačiai masyvai Java</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/composition-relations">santykio kompozicija</a>
</li><li><a href="/what-are-modifier-keys">modifikavimo klavišai</a>
</li><li><a href="/java-convert-int-string">int konvertavimas į eilutę Java</a>
</li><li><a href="/latex-partial-derivative">daliniai latekso dariniai</a>
</li><li><a href="/fmovies-alternatives">fmoviez</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 Visos Teisės Saugomos | <a href="//pl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo 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>