cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS样式权值的详细介绍

CSS样式权值的详细介绍

高洛峰
高洛峰asal
2017-03-28 10:34:501531semak imbas

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)
例外：但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;
1,内联样式表权值为1000;
2,ID选择器的权值为100;
3,Class类选择器的权值为10;
4,HTML标签选择器的权值为1;
具体代码如下：

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>CSS样式权值</title>  
        <style>  
            body{   
                font-size: 20px;   
                font-weight: 900;    
            }   
            h3{   
                color: yellow;   
            }   
            #redP p{   
                /*权值100+1=101*/   
                color: #f00;   
                /*红色*/   
            }   
            #redP p.red em{   
                /*权值100+1+10+1=112*/   
                color: #00f;   
                /*蓝色*/   
            }   
            #redP .red em{   
                /*权值100+10+1=111*/   
                color: #0ff;   
                /*亮蓝色*/   
            }   
      
      
            #redP p span em{   
                /*权值100+1+1+1=103*/   
                color: #ff0;   
                /*黄色*/   
            }   
        </style>  
        <link rel="stylesheet" href="style.css">  
    </head>  
    <body>  
        <h3>例外:外部样式表>内部样式表</h3>  
        <p id="redP">  
            <p class="red">  
                <span>  
                    <em>emred</em>  
                </span>  
            </p>  
            <p>red</p>  
        </p>  
    </body>  
    </html>


Atas ialah kandungan terperinci CSS样式权值的详细介绍 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
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 sebelumnya：使用CSS3进行样式效果增强的详细介绍Artikel seterusnya：分享利用CSS生成小圆点图案代码

Artikel berkaitan

Lihat lagi