zoukankan      html  css  js  c++  java
  • CSS样式权值


    内联样式表(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>
  • 相关阅读:
    [SCOI2003]严格N元树
    CF280 C. Game on Tree
    [HDU2281]Square Number
    [HDU5391]Zball in Tina Town
    [HDU3988]Harry Potter and the Hide Story
    [HDU5794]A Simple Chess
    [HDU5451]Best Solver
    [HDU1724]Ellipse
    [HDU6304]Chiaki Sequence Revisited
    [HDU6343]Graph Theory Homework
  • 原文地址:https://www.cnblogs.com/king2016/p/5738773.html
Copyright © 2011-2022 走看看