Selectoarele CSS sunt coloana vertebrală a oricărei pagini web elegante. Acestea vizează elemente HTML din paginile dvs., permițându-vă să adăugați stiluri pe baza id-ului, clasei, tipului, atributului și multe altele. Acest ghid va aprofunda în complexitatea selectoarelor CSS și în rolul lor esențial în îmbunătățirea esteticii și experienței utilizatorului paginilor dvs. web.
Tipuri de selectoare CSS
Selectoarele CSS sunt disponibile în diferite tipuri, fiecare cu modul său unic de a selecta elementele HTML. Să le explorăm:
| Selectoare CSS | Descriere |
|---|---|
Selectoare simple | Este folosit pentru a selecta elementele HTML pe baza numelui, id-ului, atributelor, etc |
| Selector universal | Selectează toate elementele din pagină. |
| Selector de atribute | Vizează elementele pe baza valorilor atributelor lor. |
| Selector de pseudo-clasă | Selectează elemente în funcție de starea sau poziția lor, cum ar fi:hover>pentru efecte de hover. |
| Selectoare combinatoare | Combinați selectoare pentru a specifica relațiile dintre elemente, cum ar fi descendenții (>) sau copil (>>>>). |
| Selector de pseudo-element | Selectează anumite părți ale unui element, cum ar fi |
Cuprins
- Tipuri de selectoare CSS
- Selectoare simple
- Selector de elemente
- Selector de id
- Selector de clasă
- Selector universal
- Selector de grup
- Selector de atribute
- Selector de pseudo-clasă
- Selector de pseudo-element
Selectoare simple
Selectorii simpli conțin clasele de mai jos.
| Selector simplu | Descriere |
|---|---|
| Selector de elemente | Selectează elementele HTML pe baza numelor lor de etichetă. |
| Selector de id | Vizează un element HTML cu un anumit atribut ID. |
| Selector de clasă | Selectează elemente cu un anumit atribut de clasă. |
Exemplu: În acest exemplu, vom scrie codul pentru a înțelege mai bine selectorii și utilizările lor.
HTML Selector CSS titlu><link rel='stylesheet' href='style.css' />cap> <body> <h1>Titlul eșantionh1><p>Acesta este conținutul din primul paragrafp><div id='div-container'>Acesta este un div cu id div-container div><p>Acesta este un paragraf cu clasa paragraf-clasa p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Vom aplica regulile CSS la exemplul de mai sus.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-full-form-ide">forma completă a i d e</a>
</blockquote> <h2 id='element-selector'> <b> <strong>Selector de elemente</strong> </b> </h2><p dir='ltr'><span>The</span> <span>selector de elemente</span> <span>selectează elemente HTML pe baza numelui (sau etichetei) elementului, de exemplu p, h1, div, span etc.</span></p> <p dir='ltr'> <b> <strong>NOTĂ :</strong> </b> <span>Următorul cod este utilizat în exemplul de mai sus. Puteți vedea regulile CSS aplicate tuturor</span> <span></span></p><p> <span>etichete și</span></p><h1>Etichete.<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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Selector-Element-Exemplu-ieșire"><p>Ieșire CSS Element Selector</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>Selector de id</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>selector de id</strong> </b> <span>folosește</span> <i> <em>atributul id</em> </i> <span>a unui element HTML pentru a selecta un anumit element.</span> <b> <strong> </strong> </b> <span>Un</span> <b> <strong>id</strong> </b> <span>elementul este unic pe o pagină de utilizat</span> <b> <strong>id-ul</strong> </b> <span>selector.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Următorul cod este folosit în exemplul de mai sus folosind selectorul de id.</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>Ieșire:</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-selectori-exemplu-ieșire"><p>Exemplu de ieșire CSS ID Selectori</p> <h2 id='class-selector'> <b> <strong>Selector de clasă</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>selector de clasă</strong> </b> <span>selectează elemente HTML cu un anumit atribut de clasă.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-instanceof">exemplu de în java</a>
</blockquote> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Următorul cod este folosit în exemplul de mai sus folosind selectorul de clasă. Pentru a utiliza un selector de clasă, trebuie să utilizați ( . ) urmat de numele clasei în CSS. Această regulă va fi aplicată elementului HTML cu atributul class</span> <i> <em>paragraf-clasa</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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Class-Selectors-Exemple-Output"><p>Selector de clasă CSS Exemplu de ieșire</p> <h2 id='universal-selector'> <b> <strong>Selector universal</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Selector universal</span> <span>(*) în CSS este folosit pentru a selecta toate elementele dintr-un document HTML. Include și alte elemente care se află în interior sub alt element.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Următorul cod este utilizat în exemplul de mai sus folosind selectorul universal. Această regulă CSS va fi aplicată fiecărui element HTML de pe pagină:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Selector-Universal-Exemplu-Ieșire"><p>CSS Universal Selector Exemplu de ieșire</p> <h2 id='group-selector'> <b> <strong>Selector de grup</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>Selector de grup</strong> </b> <span>este folosit pentru a stila toate elementele separate prin virgulă cu același stil.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Să presupunem că doriți să aplicați stiluri comune diferitelor selectoare, în loc să scrieți regulile separat, le puteți scrie în grupuri, așa cum se arată mai jos.</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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Selector-Grup-Exemplu-Ieșire"><p>Selector de grup CSS Exemplu de ieșire</p> <h2 id='attribute-selector'> <b> <strong>Selector de atribute</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>selector de atribute</strong> </b> <span>[atribut] este folosit pentru a selecta elementele cu un atribut sau o valoare de atribut specificată.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Următorul cod este folosit în exemplul de mai sus folosind selectorul de atribute. Această regulă CSS va fi aplicată fiecărui element HTML de pe pagină:</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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Atribut-Selectros-Exemplu-Ieșire"><p>Atribut CSS Selectros Exemplu de ieșire</p> <h2 id='pseudoclass-selector'> <b> <strong>Selector de pseudo-clasă</strong> </b> </h2><p dir='ltr'><span>Este folosit pentru a stila un tip special de stare al oricărui element. De exemplu, este folosit pentru a stila un element atunci când cursorul mouse-ului trece peste el.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Folosim un singur două puncte(:) în cazul unui</span> <span>Selector de pseudo-clasă</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaxă:</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>Ieșire:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/er-diagram-dbms">diagrama modelului e-r</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-Selector-Exemplu-Ieșire"><p>Ieșire exemplu de pseudoselector CSS</p> <h2 id='pseudoelement-selector'> <b> <strong>Selector de pseudo-element</strong> </b> </h2><p dir='ltr'><span>Este folosit pentru a stila orice parte specifică a elementului. De exemplu - este folosit pentru a stila prima literă sau prima linie a oricărui element.</span></p> <p dir='ltr'> <b> <strong>Notă:</strong> </b> <span>Folosim două puncte duble(::) în cazul a</span> <span>Selector de pseudo-element</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaxă:</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>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Selector-Exemplu-Ieșire"><p>Exemplu de ieșire a selectorului de pseudo-element CSS</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/bash-tutorial/">Tutorial Bash</a> </li><li> <a href="/java-servlet/">Java-Servlet</a> </li><li> <a href="/java-calendar-class/">Clasa Java Calendar</a> </li><li> <a href="/sas-tutorial/">Tutorial Sas</a> </li><li> <a href="/javascript-es/">Javascript-Es</a> </li><li> <a href="/companies-list/">Lista Companiilor</a> </li><li> <a href="/java-lang-package/">Pachetul Java-Lang</a> </li><li> <a href="/arduino-tutorial/">Tutorial Arduino</a> </li><li> <a href="/number-system-maq/">Sistem De Numere - Maq</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Pot numerele negative să fie numere raționale?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/can-negative-numbers-be-rational-numbers"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-calculate-acceleration-13174">Cum să calculezi accelerația: cele 3 formule de care ai nevoie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/decomposition-reaction">Reacția de descompunere</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-scanner-close-method">Metoda Java Scanner close().</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-olive-oil-hair">Avantajele și dezavantajele uleiului de măsline în păr</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/header-files-c">Fișierele antet în C</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/rename-folder-linux">redenumiți un director linux</a>
</li><li><a href="/how-reverse-string-java">șir invers în java</a>
</li><li><a href="/git-status">git status -s</a>
</li><li><a href="/java-string-contains">șir conține</a>
</li><li><a href="/java-break-statement">cum să ieși dintr-o buclă while java</a>
</li><li><a href="/latex-fonts-size-styles">dimensiune font latex</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 Toate Drepturile Rezervate | <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>