Rumah > hujung hadapan web > tutorial css > 'Jenis Pemilih CSS Berbeza'

'Jenis Pemilih CSS Berbeza'

Linda Hamilton
Lepaskan: 2025-01-06 18:15:43
asal
502 orang telah melayarinya

Jenis Pemilih dalam CSS:

Pemilih Kelas:

Kod:

<body>
    <p>





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

Pemilih Id:

Kod:

<body>
    <h1>





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

}

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

}
</style>

Salin selepas log masuk

Pemilih Elemen:

<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>
Salin selepas log masuk
<style>
    h1 {
        color: blue;
    }
    p {
      font-size: 16px;

    }
    a {
        text-decoration: none;
        color: red;
    }
</style>
Salin selepas log masuk

Pemilih Universal

Kod:

<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>
Salin selepas log masuk
<style>
*{
    margin: 0;
    padding: 0;
    border: 1 px solid;
}
</style>
Salin selepas log masuk

Pemilih Kumpulan:

Kod:

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

Pemilih Atribut:

Kod:

<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>
Salin selepas log masuk

Atas ialah kandungan terperinci 'Jenis Pemilih CSS Berbeza'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan