Bagaimana untuk melaraskan keutamaan cascading gaya css-tutorial css-php.cn

Bagaimana untuk melaraskan keutamaan cascading gaya css

PHPz

Lepaskan： 2024-02-23 14:15:03

asal

1256 orang telah melayarinya

Bagaimana untuk melaraskan keutamaan cascading gaya css

Kaedah untuk pengoptimuman lata gaya CSS

Dalam pembangunan web, kami menggunakan CSS untuk menambah gaya dan reka letak pada halaman web. Walau bagaimanapun, apabila berbilang peraturan gaya digunakan pada elemen pada masa yang sama, masalah lata gaya berlaku. Dalam kes ini, kita perlu memahami cara menyesuaikan keutamaan gaya. Artikel ini menerangkan beberapa cara untuk menyesuaikan keutamaan gaya dan menyediakan contoh kod khusus.

Keutamaan cascading gaya CSS ditentukan oleh faktor berikut:

Sumber helaian gaya: Gaya sebaris > lebih spesifik ianya. Tinggi, lebih tinggi keutamaan
Susunan peraturan gaya: Peraturan gaya yang ditakrifkan kemudian akan menimpa peraturan gaya yang ditakrifkan dahulu
Di bawah, kami akan memperkenalkan ketiga-tiga faktor ini masing-masing dan memberikan contoh kod yang sepadan.

Sumber helaian gaya

Gaya sebaris ialah gaya yang ditulis terus dalam teg HTML dan mempunyai keutamaan tertinggi. Contohnya:

<div style="color: red;">This is some text.</div>

Salin selepas log masuk

Helaian gaya dalaman ialah gaya yang ditulis di dalam teg <style> dan keutamaannya lebih tinggi daripada helaian gaya luaran. Contohnya:

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is some text.</p>
</body>

Salin selepas log masuk

Helaian gaya luaran ialah gaya yang diperkenalkan dengan memaut ke fail CSS luaran, yang mempunyai keutamaan paling rendah. Contohnya: <style>标签内部的样式，它的优先级高于外部样式表。例如：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Salin selepas log masuk

外部样式表是通过链接到外部CSS文件来引入的样式，它的优先级最低。例如：

<style>
    p {
        color: red;
    }
    
    #myId {
        color: blue;
    }
    
    .myClass {
        color: green;
    }
</style>

<p>This is some text.</p>
<p id="myId">This is some text.</p>
<p class="myClass">This is some text.</p>

Salin selepas log masuk

选择器的特殊性

选择器的特殊性可以通过以下规则计算：

内联样式：特殊性为1000
ID选择器：特殊性为100
类选择器、属性选择器和伪类选择器：特殊性为10
元素选择器和伪元素选择器：特殊性为1

特殊性高的选择器优先级更高。例如：

<style>
    p {
        color: red;
    }
    
    p {
        color: blue;
    }
</style>

<p>This is some text.</p>

Salin selepas log masuk

上述代码中，第一个元素的文字颜色为红色，第二个元素的文字颜色为蓝色，第三个元素的文字颜色为绿色。因为ID选择器的特殊性最高。

样式规则的顺序

当多个样式规则具有相同的选择器和特殊性时，后定义的样式规则会覆盖先定义的样式规则。例如：

rrreee

上述代码中，rrreee

Kekhususan pemilih boleh dikira dengan peraturan berikut:

🎜Gaya sebaris: kekhususan ialah 1000🎜🎜Pemilih ID : kekhususan ialah 100🎜🎜Pemilih kelas, pemilih atribut dan pemilih kelas pseudo: Kekhususan ialah 10🎜🎜Pemilih elemen dan pemilih elemen pseudo: Kekhususan ialah 1🎜🎜Memilih dengan kekhususan tinggi Pelayan mempunyai keutamaan yang lebih tinggi . Contohnya: 🎜rrreee🎜Dalam kod di atas, warna teks elemen  pertama ialah merah dan warna teks bagi  kedua elemen berwarna biru Warna, warna teks elemen  ketiga ialah hijau. Kerana pemilih ID adalah yang paling khusus. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaraskan keutamaan cascading gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!