css tidak melaporkan ralat

CSS tidak melaporkan ralat

CSS ialah bahagian yang sangat penting dalam pembangunan bahagian hadapan. Ia bertanggungjawab untuk pembentangan gaya halaman web. Sebagai pembangun bahagian hadapan, kita semua telah menghadapi situasi sedemikian: jelas tiada masalah dengan sintaks CSS, tetapi gaya tidak boleh dipaparkan dengan betul pada halaman.

Keadaan ini biasanya menjadikan pembangun sangat keliru dan keliru, malah membuang banyak masa untuk mencari masalah. Dalam artikel ini, kami akan membincangkan beberapa masalah biasa yang menyebabkan CSS tidak melaporkan ralat tetapi gaya tidak dapat dipaparkan dengan betul dan menyediakan beberapa penyelesaian supaya pembaca dapat menyelesaikan masalah ini dengan cepat.

1. Pemilih CSS tidak sepadan dengan elemen dengan betul

Apabila menulis CSS, kami biasanya menggunakan pemilih untuk menyasarkan elemen untuk digayakan. Tetapi kadangkala, kami mungkin memilih pemilih yang salah atau menggunakan pemilih yang salah untuk mencari elemen, menyebabkan gaya CSS tidak dipaparkan dengan betul.

Sebagai contoh, kita mungkin menggunakan pemilih kelas untuk menggayakan elemen yang diikat oleh pemilih id atau menggunakan pemilih id untuk menggayakan elemen yang diikat oleh pemilih kelas:

#my-class {
    color: red;
}

.my-id {
    font-size: 16px;
}

Gaya CSS ditulis cara ini tidak akan dipaparkan dengan betul kerana pemilih tidak dapat memadankan elemen dengan betul. Penulisan yang betul hendaklah:

#my-id {
    color: red;
}

.my-class {
    font-size: 16px;
}

2. Gaya CSS ditindih oleh gaya lain

Dalam helaian gaya, kami biasanya mentakrifkan berbilang gaya, tetapi gaya ini mungkin Berinteraksi dengan setiap lain, menyebabkan beberapa gaya ditindih oleh gaya lain. Keadaan ini biasanya berlaku apabila kita melihat gaya elemen dalam penyemak imbas dan mendapati gaya tersebut dipaparkan secara tidak betul, atau hanya sebahagian daripada gaya yang berkesan.

Sebagai contoh, kita mungkin mentakrifkan berbilang gaya untuk elemen yang sama dalam helaian gaya:

.my-class {
    color: red;
}

.my-class {
    font-size: 16px;
}

Gaya yang ditulis dengan cara ini hanya akan berkuat kuasa untuk gaya kemudian, manakala gaya sebelumnya akan menjadi Gaya dilindungi. Cara yang betul untuk menulisnya ialah menggunakan satu gaya untuk mentakrifkan berbilang atribut:

.my-class {
    color: red;
    font-size: 16px;
}

3. Gaya CSS diwarisi

Gaya CSS mempunyai beberapa atribut yang boleh diwarisi oleh unsur anak unsur yang diwarisi. Contohnya, atribut color dan font-size boleh diwarisi oleh elemen anak. Kadangkala kami tidak mahu elemen kanak-kanak mewarisi gaya tertentu, tetapi kami tersilap mentakrifkan gaya ini pada elemen induk elemen tersebut, menyebabkan elemen kanak-kanak mewarisi gaya ini, mengakibatkan paparan halaman tidak betul.

Sebagai contoh, kita mungkin mentakrifkan beberapa gaya dalam div, tetapi gaya ini diwarisi oleh elemen anaknya:

div {
    color: red;
    font-size: 16px;
}

Gaya yang ditulis dengan cara ini akan menyebabkan Semua elemen kanak-kanak mewarisi gaya ini, termasuk teks, pautan, dsb. Cara yang betul untuk menulisnya ialah dengan mentakrifkan gaya secara berasingan untuk setiap elemen, bukannya mentakrifkannya pada elemen induknya.

4. Sifat gaya CSS ditindih oleh sifat lalai penyemak imbas

Tingkah laku lalai penyemak imbas adalah untuk menetapkan beberapa sifat gaya lalai untuk beberapa elemen HTML, contohnya, ul Gaya lalai elemen adalah untuk menetapkan lekukan kiri item senarai dan gaya tanda item senarai.

Kadangkala kami mungkin cuba mentakrifkan atribut lalai ini, tetapi sebenarnya atribut ini telah ditindih oleh nilai lalai penyemak imbas, menyebabkan gaya kami tidak dipaparkan dengan betul.

Sebagai contoh, kita mungkin cuba mentakrifkan atribut margin untuk elemen ul, tetapi atribut ini telah ditindih oleh atribut lalai penyemak imbas:

ul {
    margin: 0;
}

Gaya yang ditulis dengan cara ini tidak akan menjadi dipaparkan dengan betul, kerana Pelayar telah menetapkan nilai inden dan margin lalai untuk elemen ul. Cara yang betul untuk menulisnya ialah menggunakan sifat CSS tertentu untuk mengubah suai nilai sifat lalai:

ul {
    padding: 0;
    list-style: none;
}

5. Sifat gaya CSS tidak berkesan

Kadang-kadang kita mentakrifkan property dalam CSS , tetapi atribut ini tidak mempunyai kesan atau ditindih oleh gaya lain. Ini biasanya berlaku apabila kami menulis gaya CSS di tempat yang salah, atau tidak memasukkan lembaran gaya dengan betul dalam templat.

Sebagai contoh, kami mungkin mentakrifkan gaya di kepala, tetapi gaya ini tidak berkesan kerana kami tidak memperkenalkan helaian gaya dengan betul dalam templat:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

Cara menulis yang betul ia adalah Rujukan helaian gaya diletakkan di kepala:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

Di atas adalah beberapa masalah biasa yang menyebabkan CSS tidak melaporkan ralat tetapi gaya tidak dapat dipaparkan dengan betul Jika anda menghadapi masalah ini, saya harap ini artikel boleh membantu anda. Akhir sekali, kami amat mengesyorkan agar anda membaca dokumentasi dan spesifikasi dengan teliti semasa menulis CSS, dan menyusun dan mengoptimumkan helaian gaya anda secara rasional untuk menjadikan gaya anda lebih mudah dikekalkan dan dikembangkan.

Atas ialah kandungan terperinci css tidak melaporkan ralat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!