CSS-valitsimet ovat jokaisen tyylikkään verkkosivun selkäranka. Ne kohdistavat sivujesi HTML-elementteihin, jolloin voit lisätä tyylejä niiden tunnuksen, luokan, tyypin, määritteen ja muiden perusteella. Tässä oppaassa perehdytään CSS-valitsimien monimutkaisuuteen ja niiden keskeiseen rooliin verkkosivujesi esteettisyyden ja käyttökokemuksen parantamisessa.
CSS-valitsimien tyypit
CSS-valitsimia on erilaisia, ja jokaisella on ainutlaatuinen tapa valita HTML-elementtejä. Tutustutaanpa niihin:
aws sns
| CSS-valitsimet | Kuvaus |
|---|---|
Yksinkertaiset valitsimet | Sitä käytetään HTML-elementtien valitsemiseen niiden elementin nimen, id:n, attribuuttien jne. perusteella |
| Yleisvalitsin | Valitsee kaikki sivun elementit. |
| Attribuutin valitsin | Kohdistaa elementtejä niiden attribuuttiarvojen perusteella. |
| Pseudoluokan valitsin | Valitsee elementit niiden tilan tai sijainnin perusteella, kuten:hover>hover-tehosteita varten. |
| Yhdistelmävalitsimet | Yhdistä valitsimia määrittääksesi elementtien välisiä suhteita, kuten jälkeläisiä (>) tai lapsi (>>>). |
| Pseudoelementin valitsin | Valitsee elementin tietyt osat, kuten |
Sisällysluettelo
- CSS-valitsimien tyypit
- Yksinkertaiset valitsimet
- Elementin valitsin
- Tunnusvalitsin
- Luokkavalitsin
- Yleisvalitsin
- Ryhmän valitsin
- Attribuutin valitsin
- Pseudoluokan valitsin
- Pseudoelementin valitsin
Yksinkertaiset valitsimet
Yksinkertaiset valitsimet sisältävät alla olevat luokat.
| Yksinkertainen valitsin | Kuvaus |
|---|---|
| Elementin valitsin | Valitsee HTML-elementit niiden tunnisteen nimien perusteella. |
| Tunnusvalitsin | Kohdistaa HTML-elementtiin tietyllä id-attribuutilla. |
| Luokkavalitsin | Valitsee elementit tietyllä luokkaattribuutilla. |
Esimerkki: Tässä esimerkissä kirjoitamme koodin ymmärtääksemme valitsimia ja niiden käyttöä paremmin.
HTML CSS Selectortitle><link rel='stylesheet' href='style.css' />pää> <body> <h1>Esimerkki Otsikko1><p>Tämä on Sisältö ensimmäisessä kappaleessap><div id='div-container'>Tämä on div, jonka tunnus on div-container div><p>Tämä on kappale, jonka luokka on kappaleluokka p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Sovellamme CSS-sääntöjä yllä olevaan esimerkkiin.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='element-selector'> <b> <strong>Elementin valitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <span>elementin valitsin</span> <span>valitsee HTML-elementtejä elementin nimen (tai tagin) perusteella, esimerkiksi p, h1, div, span jne.</span></p> <p dir='ltr'> <b> <strong>HUOMAUTUS :</strong> </b> <span>Seuraavaa koodia käytetään yllä olevassa esimerkissä. Näet kaikkiin sovellettavat CSS-säännöt</span> <span></span></p><p> <span>tunnisteet ja</span></p><h1>tunnisteet.<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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-elementti-valitsimet-esimerkkitulostus"><p>CSS Element Selector -lähtö</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>Tunnusvalitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>id valitsin</strong> </b> <span>käyttää</span> <i> <em>id-attribuutti</em> </i> <span>HTML-elementistä valitaksesi tietyn elementin.</span> <b> <strong> </strong> </b> <span>An</span> <b> <strong>id</strong> </b> <span>elementti on ainutlaatuinen käytettävällä sivulla</span> <b> <strong>id</strong> </b> <span>valitsin.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Seuraavaa koodia käytetään yllä olevassa esimerkissä id-valitsimella.</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>Lähtö:</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-selctors-example-output"><p>CSS ID -valitsimen esimerkkituloste</p> <h2 id='class-selector'> <b> <strong>Luokkavalitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>luokan valitsin</strong> </b> <span>valitsee HTML-elementit tietyllä luokkaattribuutilla.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Seuraavaa koodia käytetään yllä olevassa esimerkissä luokan valitsimen avulla. Jotta voit käyttää luokan valitsinta, sinun on käytettävä (. ) ja luokan nimi CSS:ssä. Tätä sääntöä sovelletaan HTML-elementtiin, jossa on class-attribuutti</span> <i> <em>kappaleluokka</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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Class-Selectors-Example-Output"><p>CSS-luokan valitsimen esimerkkituloste</p> <h2 id='universal-selector'> <b> <strong>Yleisvalitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <span>Yleisvalitsin</span> <span>(*) CSS:ssä käytetään valitsemaan kaikki HTML-dokumentin elementit. Se sisältää myös muita elementtejä, jotka ovat sisällä toisen elementin alla.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-int">muuta merkkijono int</a>
</blockquote> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Seuraavaa koodia käytetään yllä olevassa esimerkissä yleisvalitsinta käyttämällä. Tätä CSS-sääntöä sovelletaan jokaiseen sivun HTML-elementtiin:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universal-Selector-Example-Output"><p>CSS Universal Selector -esimerkkituloste</p> <h2 id='group-selector'> <b> <strong>Ryhmän valitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>Ryhmän valitsin</strong> </b> <span>käytetään tyylistämään kaikki pilkuilla erotetut elementit samalla tyylillä.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Oletetaan, että haluat käyttää yhteisiä tyylejä eri valitsimiin, sen sijaan, että kirjoittaisit säännöt erikseen, voit kirjoittaa ne ryhmiin alla olevan kuvan mukaisesti.</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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-ryhmä-valitsin-esimerkki-ulostulo"><p>CSS-ryhmän valitsimen esimerkkitulostus</p> <h2 id='attribute-selector'> <b> <strong>Attribuutin valitsin</strong> </b> </h2><p dir='ltr'><span>The</span> <b> <strong>määritteen valitsin</strong> </b> <span>[attribuutti] käytetään valitsemaan elementit, joilla on määritetty attribuutti tai määritearvo.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Seuraavaa koodia käytetään yllä olevassa esimerkissä attribuuttivalitsimen avulla. Tätä CSS-sääntöä sovelletaan jokaiseen sivun HTML-elementtiin:</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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribute-Selectros-Example-Output"><p>CSS-attribuuttien valitsimien esimerkkitulostus</p> <h2 id='pseudoclass-selector'> <b> <strong>Pseudoluokan valitsin</strong> </b> </h2><p dir='ltr'><span>Sitä käytetään minkä tahansa elementin erityistilan muotoilemiseen. Esimerkiksi - Sitä käytetään elementin tyyliin, kun hiiren osoitin liikkuu sen päällä.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Käytämme yhtä kaksoispistettä (:) tapauksessa a</span> <span>Pseudoluokan valitsin</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaksi:</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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-valitsin-esimerkki-ulostulo"><p>CSS-pseudovalitsimen esimerkkitulostus</p> <h2 id='pseudoelement-selector'> <b> <strong>Pseudoelementin valitsin</strong> </b> </h2><p dir='ltr'><span>Sitä käytetään elementin minkä tahansa tietyn osan muotoiluun. Esimerkiksi - Sitä käytetään minkä tahansa elementin ensimmäisen kirjaimen tai ensimmäisen rivin tyyliin.</span></p> <p dir='ltr'> <b> <strong>Huomautus:</strong> </b> <span>Käytämme kaksoispistettä (::) tapauksessa a</span> <span>Pseudoelementin valitsin</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Syntaksi:</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>Lähtö:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Selector-Example-Output"><p>CSS-pseudoelementin valitsimen esimerkkitulostus</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="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/maths-class-6-cat/">Matematiikka-Luokka-6</a> </li><li> <a href="/javafx-tutorial/">Javafx Opetusohjelma</a> </li><li> <a href="/python-scipy-tutorial/">Python Scipy Opetusohjelma</a> </li><li> <a href="/php-array-function/">Php-Taulukkofunktio</a> </li><li> <a href="/c-map-function/">C++-Karttatoiminto</a> </li><li> <a href="/system-design-qna/">Järjestelmäsuunnittelu Qna</a> </li><li> <a href="/opencv/">Opencv</a> </li><li> <a href="/parts-speech/">Puheen Osat</a> </li><li> <a href="/python-list/">Python-Lista</a> </li><li> <a href="/java-random-class/">Java Random Class</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Tietokanta</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Mikä on tietokanta? Määritelmä, tyypit, esimerkit DBMS:n yleiskatsauksesta, DBMS vs tiedostojärjestelmä, DBMS-arkkitehtuuri, kolmen skeeman arkkitehtuuri, DBMS-kieli, DBMS-avaimet, DBMS-yleistys, DBMS-erikoistuminen, relaatiomallin käsite, SQL:n esittely, SQL:n etu, DBMS-normalisointi, toiminnallinen riippuvuus, DBMS-aikataulu, Concurrency Control jne.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/database"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/html-dom/">Html-Dom</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-arrays">C++-taulukot</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/amplitude-modulation">Amplitudimodulaatio (AM)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-constant-python-importance-constant-python">Pythonin vakiotyypit | Vakion merkitys Pythonissa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static-array-java">Staattinen array Javassa</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">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/negation-discrete-mathematics">diskreetti matemaattinen negaatio</a>
</li><li><a href="/b-tree">b+ puu</a>
</li><li><a href="/how-download-youtube-video-vlc-media-player">lataa youtube-videoita vlc:llä</a>
</li><li><a href="/b-tree-vs-b-tree">b- ja b-puu</a>
</li><li><a href="/how-split-string-java-with-delimiter">java erotin</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 Kaikki Oikeudet Pidätetään | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</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>