Heim > Web-Frontend > CSS-Tutorial > „Verschiedene Arten von CSS-Selektoren'

„Verschiedene Arten von CSS-Selektoren'

Linda Hamilton
Freigeben: 2025-01-06 18:15:43
Original
525 Leute haben es durchsucht

Arten von Selektoren in CSS:

Klassenauswahl:

Code:

<body>
    <p>





<pre class="brush:php;toolbar:false"><style>
.heighlight {
    color: red;
    font-weight: bold;
}
</style>
Nach dem Login kopieren

ID-Auswahl:

Code:

<body>
    <h1>





<pre class="brush:php;toolbar:false"><style>
#main-heading {
    color: blue;
    font-size: 24px;

}

#intro-paragraph {
    background-color: yellow;
    padding: 10px;

}
</style>

Nach dem Login kopieren

Elementor-Auswahl:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    <a href="https:///www.google.com">Visit Example Website</a>
</body>
Nach dem Login kopieren
<style>
    h1 {
        color: blue;
    }
    p {
      font-size: 16px;

    }
    a {
        text-decoration: none;
        color: red;
    }
</style>
Nach dem Login kopieren

Universeller Selektor

Code:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph</p>
    <div>
        <h2>About Us</h2>
        <p>This is another paragraph</p>
    </div>
</body>
Nach dem Login kopieren
<style>
*{
    margin: 0;
    padding: 0;
    border: 1 px solid;
}
</style>
Nach dem Login kopieren

Gruppierungsauswahl:

Code:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <a href="#">Click me</a>
    <button>Submit</button>
</body>
Nach dem Login kopieren
<style>
    h1,p {
        color: blue;
    }
    a,button {
        background-color: yellow;
        padding: 10px;
    }
</style>
Nach dem Login kopieren

Attributauswahl:

Code:

<form>
    <label for="name">Name:</label>
    <input type="text">





<pre class="brush:php;toolbar:false"><style>
    input[type="submit"] {
        background-color: #4caf50;
        color: white;
    }
    input[required] {
        border: 1px solid red;
    }
</style>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt von„Verschiedene Arten von CSS-Selektoren'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage