首页 > Web开发 > 详细

css权值【转】

时间:2019-09-09 21:45:23      阅读:100      评论:0      收藏:0      [点我收藏+]

——如有侵权, 请联系, 必删————

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)
例外:但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;

1,内联样式表 的权值为1000;
2,ID选择器 的权值为100;
3,Class类选择器,伪类选择器 的权值为10;
4,HTML标签选择器,伪元素 的权值为1;

PS: 伪类-有6个——:link、:visited、:hover、:active、:focus、:first-child
       伪元素-有4个——:before、:after、:first-line、:first-letter

具体代码如下:

技术分享图片
<!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>
    <div id="redP">
        <p class="red">
            <span>
                <em>emred</em>
            </span>
        </p>
        <p>red</p>
    </div>
</body>
</html>
技术分享图片

 

css权值【转】

原文:https://www.cnblogs.com/TJack/p/11494328.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!