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

„Verschiedene Arten von CSS-Selektoren'

Linda HamiltonOriginal: 2025-01-06 18:15:43528Durchsuche

Arten von Selektoren in CSS:

Klassenauswahl:

Code:

<body>
    <p>





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

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>

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>

<style>
    h1 {
        color: blue;
    }
    p {
      font-size: 16px;

    }
    a {
        text-decoration: none;
        color: red;
    }
</style>

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>

<style>
*{
    margin: 0;
    padding: 0;
    border: 1 px solid;
}
</style>

Gruppierungsauswahl:

Code:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <a href="#">Click me</a>
    <button>Submit</button>
</body>

<style>
    h1,p {
        color: blue;
    }
    a,button {
        background-color: yellow;
        padding: 10px;
    }
</style>

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>

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!

css

Stellungnahme：

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

Vorheriger Artikel：ebsites, die jeder CSS-Entwickler kennen sollteNächster Artikel：ebsites, die jeder CSS-Entwickler kennen sollte

In Verbindung stehende Artikel

Mehr sehen