css詳解1

時間 2019-11-10

標籤 css 詳解欄目 CSS 简体版

原文原文鏈接

一、css的三種引入方式：

1.一、行內引入

<div style="color:red;">魔降風雲變</div>

<html>
<head>
    <meta charset="UTF-8"></head>
<body>
    <div style="color:red;">魔降風雲變</div>
</body>
</html>

用的是行內的css

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
            color:gold;
        }
    </style>
<body>
    <div id="box" style="color:red;">魔降風雲變</div>
</body>
</html>

沒有找到它的樣式html

1.2內嵌式：

head中寫    
<style>
        #box{
            background-color: gold;
        }
    </style>

<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
           background-color: gold;
        }
    </style>
<body>
    <div id="box" style="color:red;">魔降風雲變</div>
</body>

換了就有了，不能覆蓋，優先級沒它高瀏覽器

1.3外接式：

外接式是定義在head標籤中，而且不在style中。工具

<link href="css/index.css" rel="stylesheet" >

index.css文件佈局

#box{
    background-color: black;
}

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
            background-color: gold;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
<body>
    <div id="box" style="color:red;">魔降風雲變</div>
</body>
</html>

1.四、三種樣式的優先級

行內樣式>內嵌式和外接式
內嵌式和外接要看誰在後面，在後面的優先級高，會覆蓋前面的。開發工具

二、基礎選擇器

2.一、id選擇器

惟一的測試

#xxx

id選擇器就是在標籤裏面加個id,能夠和class同名 #id名字{css}字體

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
    #box{ color:blue; } </style>

<body>
    <div class="box active" id="box">小馬過河</div>
    <hr>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

2.二、類選擇器

能夠重複，歸類，類也能夠設置多個網站

.xxx

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 200px;
        }
    </style>

<body>
    <div class="box active"></div>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

border-radius邊框圓角，彷佛當邊框圓角和正方形div的寬高一致的時候就會成圓形

        .active{
            border-radius: 40px; #將200改成40
        }

2.3標籤選擇器

標籤{css}
div{}   p{}

做用於多個相同標籤spa

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
        #box{
            color:blue;
        }
 div{ border: 1px solid #000;
        }
    </style>

<body>
    <div class="box active" id="box">小馬過河</div>
    <hr>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

使用場景一（a標籤）：

取消全部a標籤的默認下劃線

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
</body>
</html>

使用場景二（從新設置邊框）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    用戶名：<input type="text">
</body>
</html>

添加標籤選擇器，取消邊框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input{
            border: none;
        }
    </style>
</head>
<body>
    用戶名：<input type="text">
</body>
</html>

鼠標放到那個位置點擊一下，又出現藍色框，這個被叫作外線：

去掉外線，這樣默認的線都沒了，能夠從新設置邊框：

        input{
            border: none;
            outline: none;
        }

從新設置邊框：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input{
            border: none;
            outline: none;
        }
        #mcw{ border:9px solid #0000cc ; } </style>
</head>
<body>
    用戶名：<input id="mcw" type="text">
</body>
</html>

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
        }

給邊框加個高度，字體的高度仍是沒有變化　　

將字體設置大點：

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
            font-size: 30px;
        }

和別人的框比起來，別人的框文字在左右不能到邊，下面設置一下

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
            font-size: 30px;
            padding: 0 100px; #第一個表示上下，第二個表示左右，內部填充，邊框長度也加了，
        }

三、盒模型

3.一、

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 200px;
            height:200px;
            background-color: red;
    </style>
</head>
<body>
    <div id="box" class="box" >魔降風雲變</div>
</body>
</html>

盒模型200*200

3.二、pading設置一個值，上下左右。

<style>
    #box{
        width: 200px;
        height:200px;
        background-color: red;
        padding: 50px;
        }
</style>

pading設置上下左右各50px內邊距，一個值。盒子大小變成300*300

若是我在div中加些字，若是不設置pading。默認內部子元素都在左上角開始顯示，。因此經過pading能夠調整內部子元素的位置。一個元素也叫一個標籤。

再添加一個邊界 border ，盒子加鎖邊框大小變成了308*308

    <style>
        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 50px;
            border: 4px solid #000;
            }
    </style>

若是我想保持盒子大小，那麼我要調整pading，border，和盒子高度寬度的大小。

302*302

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 50px;
            border: 1px solid #000;
            }

3.3pading兩個值，表示上下和左右

        #box{
            width: 200px;
            height:200px;
            background-color: red;
          padding: 0 20px; #上下0，左右20.0px能夠省略px
            border: 1px solid #000;
            }

3.四、pading三個值，表示上左右下

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 0 20px 30px; /* 0上  20左右  30下
            border: 1px solid #000;
            }

3.五、pading四個值，表示上右下左，

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 10px 20px 30px 40px;  /*上 右  下 左  順時針*/
            border: 1px solid #000;
            }

3.六、pading單獨設置一個方向

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding-top: 20px;
            border: 1px solid #000;
            }

單獨設置pading-top ,文字在盒子裏往下擠了。單獨左邊增長，文字往右走；此外還有其餘

pading

pading-top

pading-bottom

pading-left

pading-right

3.7盒子設置magin

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding-top: 20px;
            margin-left: 30px;
            border: 1px solid #000;
            }

左邊加個30的margin，盒子邊框總體右移。

盒子body自己還有8px的大小

四、標籤嵌套關係

4.1標籤的嵌套關係之塊級標籤

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
 width: 200px; height:200px; background-color: yellow;
            }
    </style>
</head>
<body>
    <div class="box" ></div>
</body>
</html>

塊級標籤特色：獨佔一行，能夠設置寬高，若是不設置寬，默認是父標籤的100%寬度。

塊級標籤屬性：display

p標籤的使用這個樣式，p標籤上下還有16的margin。

body 上下左右瀏覽器默認設置8px的margin

塊級標籤，好比div。塊級標籤display的屬性值默認是block，瀏覽器內置的，默認給div設置的。

塊級標籤能夠將display修改掉，將它修改成inline。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 200px;
            height:200px;
            background-color: yellow;
          display: inline;
            }
    </style>
</head>
<body>
    <div class="box" ></div>
    <p class="box"></p>
</body>
</html>

沒有顯示東西：

由於麼有添加內容呢

<body>
    <div class="box" >魔降風雲變</div>
    <p class="box">小馬過河</p>
</body>

就像將它們變成了span標籤同樣，很差使

4.二、標籤的嵌套關係之行內標籤

行內標籤特色：一、在一行內顯示二、不能夠設置寬高，若是不設置寬高，默認是字體大小

    <style>
        .box{
            width: 200px;
            height:200px;
            background-color: yellow;
            display: inline;
            }
    </style>
</head>
<body>
    <div class="box" >魔降風雲變</div>
    <p class="box">小馬過河</p>
    <a href="www.baidu.com">百度一下</a>
    <span>小郭吹雪</span>
</body>

若是div標籤，p標籤都和 a標籤和span標籤都在一行內顯示，證實塊標籤轉行內標籤是沒有問題的。這裏塊轉行內標籤了。塊轉行內用的很少，可是行內轉塊用的比較多。

若是我給行內標籤加個寬度和高度，沒有生效的。

    <style>
        a{
            width: 100px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">百度一下</a>
    <span>小郭吹雪</span>
</body>

行內標籤不能設置寬高

若是我想要設置行內標籤的寬度和高度，那麼把行內標籤改爲塊標籤

        a{
            width: 100px;
            height: 40px;
            background-color: red;
            display: block;
        }

再給a標籤設置一下

        a{
            width: 100px;
            height: 40px;
            background-color: red;
            display: block;  /*顯示方式 block 顯示塊  inline 顯示行內  inline-block 行內塊*/
  text-align: center; /*水平文本排列方式 ：左中右顯示*/
            line-height: 40px; /*行高：一行的高度。當行高=盒子模型高度的時候，實現垂直居中*/
            text-decoration: none; /*文本修飾： none 無修飾  underline 下劃線  line-through 有點像刪除線 */
            color: #333333;
        }

給a標籤水平居中，垂直居中，去下劃線，設置顏色

修改一下測試text-decoration: line-through; 有點像刪除線

放大點看

用標籤del實現刪除線效果：

<body>
    <!--<div class="box" >魔降風雲變</div>-->
    <!--<p class="box">小馬過河</p>-->
    <a href="www.baidu.com">百度一下</a>
    <del>小馬過河</del>
    <span >小郭吹雪</span>
</body>

4.3行內標籤之行內塊標籤

行內塊標籤特色：一、在一行內顯示二、能夠設置寬高

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <span >小郭吹雪</span>
    <input type="text">
    <input type="text">
</body>
</html>

        input{
            width: 40px;
            height: 60px;
        }
    </style>

給input添加寬和高以後，也能夠變高，變寬，由於它是行內塊，這樣看來行內塊也是能夠設置寬度和高度的。

行內塊使用演示

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <span id="s1">小郭吹雪</span>
    <span id="s2">小馬過河</span>
</body>
</html>

兩個行內標籤span結果：

    </style>        
　　　#s1{height: 40px;display: block;background-color: #d33333;}

</style>

如上設置爲塊則會換行

若是設置爲行內塊則同行顯示。當同行中某部分要設置寬度、高度且不換行的時候能夠設置爲行內塊

 #s1{height: 40px;display: inline-block;background-color: #d33333;}

#s1{width: 60px;height: 40px;display: inline-block;background-color: #d33333;}

當再添加寬度的時候，寬度不夠，這個是換行了嗎？可是其它內容仍是跟它在同行，

問題：行內標籤能包裹一個塊麼？好比 a標籤不能設置寬高，包一個塊標籤能撐起來麼？是撐不起來的。行內標籤不能放塊，有個別例外的。也能夠把塊變成行內塊，行內塊是放到行內的。塊裏面能夠包行內。div裏面能夠包div，能夠包a標籤。a裏面能夠包image，由於image是行內塊，是行內的，能夠先把a標籤轉成塊的。

好比以下栗子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #tu{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <a href="">
    <img src="dongwu.jpg" alt="" id="tu">
    </a>
</body>
</html>

行內標籤a包行內塊image，能夠包着，可是難以撐起來。可是點擊圖片任一部位仍是能夠跳轉的。

能夠給a標籤變成塊

        a{
            width: 200px;
            height: 100px;
            display: block;
        }

4.4嵌套關係總結：

　　塊級標籤能夠嵌套塊級標籤、行內標籤和行內塊

　　p標籤不要嵌套div，也不要嵌套p，

　　　　p裏能夠放 a img 表單控件

　　行內標籤儘可能不要嵌套塊級標籤

好比例外的p標籤

<body>
    <p>
        小馬過河
        <div>魔降風雲變</div>
    </p>
</body>

瀏覽器修改掉了：

全部不要p包div，能夠用div去包p。

網頁大可能是圖片和文字，因此通常最內層的標籤大都是a標籤和span這些標籤

五、高級選擇器

5.一、後代選擇器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box p{color: red}
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        魔降風雲變
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

後代選擇器和單獨用p標籤的區別：後代選擇器限定了選擇區間，哪一個div下的哪一個標籤。限定了獨立的邏輯區。

通常嵌套也不能嵌套太多層，通常是不超過8層，超過8層寫代碼都費勁。

若是我修改一下#box p{color: red} 爲#box p a{color: red} ，p下的a標籤也能夠的

p內包一個a標籤
                    <p>
                        <a href="">魔降風雲變</a>
                    </p> 


#box p a{color: red}

5.二、子代選擇器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box>p{color: red}  /*子代選擇器*/
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        魔降風雲變
                    </p>
                </div>
            </div>
        </div>
        <p>
            小馬過河
        </p>
    </div>
</body>
</html>

子代選擇器只能做用於它自己下的那一層。魔降風雲變不是子代，因此子代選擇器不能做用於魔降風雲變。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box>p>a{color: red}

    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        <a href="">魔降風雲變</a>
                    </p>
                </div>
            </div>
        </div>
        <p>
            <a href="">小馬過河</a>
        </p>
    </div>
</body>
</html>

子代選擇器也能夠連續>，可是不宜太多

5.3組合選擇器

不少標籤都有margin。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{color: red}
    </style>
</head>
<body>
    <div id="box">
        <p>
            <a href="">小馬過河</a>
        </p>
        <ul>
            <li>鋤禾</li>
            <li>當午</li>
            <li>千門萬戶曈曈日</li>
        </ul>
    </div>
</body>
</html>

ul標籤有margin和pading，ol也有。body有8pxmargin，p標籤也有margin。

不少標籤都有margin，你不肯定它是多少呀，這樣的話佈局很差計算，那就把它們都去掉。

我添加個組合選擇器，咱們已經這些p,ul,ol,body都有margin，那就都選中，讓這些標籤組合起來共用一套樣式。把這幾個設置爲0而後後面從新設置被叫作重置樣式

    <style>
        p,ul,ol,body{
            margin: 0;
            padding: 0;
        }
    </style>

去掉以後都定格寫了

能夠重置樣式的有：也能夠把a標籤的下劃線重置樣式。

        p,ul,ol,body{
            margin: 0;
            padding: 0;
        }
        input,textarea{
            border: none;
            outline: 0;
        }

重置樣式，去掉全部的margin和padding。而後在畫布上按照本身的想法去畫。經常使用。

好比小米的網站重置margin

5.四、交集選擇器

兩個選擇器做用於一樣的內容

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{color: #d33333}
        .active{font-size: 20px}
    </style>
</head>
<body>
    <p>正常字體</p>
    <span class="active">小馬過河</span>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{color: #d33333}
        .active{font-size: 20px}
 span.active{ background-color: gold;}
    </style>
</head>
<body>
    <p>正常字體</p>
    <span class="active">小馬過河</span>
    <span class="active">小馬過河2</span>
    <span >魔降風雲變1</span>
    <a href="" class="active">魔降風雲變2</a>

</body>
</html>

交集span.active{}，既是span標籤，又有類active的能夠被選中。中間不要隔開，隔開就不生效了

六、css的繼承

6.1繼承實例演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{color: red}
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降風雲變</p>
    </div>
</body>
</html>

這樣字體確定是紅色的

可是若是裝飾的是父的呢？字體也是紅的麼？一樣是紅的。#box{}做用的是div，可是p標籤也變紅了。

    <style>
        #box{color: red}
    </style>

<div id="box">
    <p class="active">魔降風雲變</p>
</div>

看開發工具可看見p標籤的繼承來自哪裏：

那麼還有沒有其餘的能夠被繼承的屬性呢

       #box{
            color: red;
            height: 40px;
            text-align: center;
        }

能夠看到height是淺紅色，沒有繼承過來。高是盒子模型的屬性，不能繼承

行高不是盒子屬性，那麼行高能夠被繼承麼？

        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 80px;
        }

能夠繼承行高

繼承性：在css有某些屬性是能夠繼承下來，color,text-xxx,line-height,font-xxx是能夠繼承下來

以下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
 color: red; height: 40px; text-align: center;
            line-height: 30px;
            background-color: yellow;
            font-size: 26px;
        }
        p{
  background-color: red; color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降風雲變</p>
    </div>
</body>
</html>

繼承來的字體是26px。bgc不能被繼承過來，本身設置了紅色背景，給p標籤。p標籤繼承來的行高30，div的高是40，因此黃色漏出10px高度。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-size: 14px}
        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background-color: yellow;
         font-size: 26px;
        }
        p{
            background-color: red;
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降風雲變</p>
    </div>
    <a href="">小馬過河</a>
</body>
</html>

body14，box26,繼承了box的26.

用的p標籤本身的，沒用

沒用那幾個繼承的，用的p標籤本身的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-size: 14px}
        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background-color: yellow;
            font-size: 26px;
        }
        #box p{
            background-color: red;
            color: greenyellow;
           font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降風雲變</p>
    </div>
    <a href="">小馬過河</a>
</body>
</html>

由下圖可知，用的#box p{}裝飾的。這裏儘可能用#box p{}指定哪裏p標籤。而不是其它div下的p標籤。body和box能夠繼承過來，可是我須要單獨給它寫，就選中它單獨爲它賦值，覆蓋掉父的屬性。這裏用的是後代選擇器。由於有繼承關係，那麼咱們就應該給body設置一個樣式做爲默認樣式。當某一部分須要單獨設置，那麼選中這一部分單獨設置。因而，就出現了一個問題，就是繼承的順序是什麼？

6.2繼承順序問題

下面程序，看看結果是繼承哪一個的呢？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
 
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p id="active" class="active" >魔降風雲變</p>
            </div>
        </div>
    </div>
</body>
</html>

首先是：<p class="active">魔降風雲變</p> ，style 直接寫在行內的優先級最高，那麼這裏只研究內嵌中的繼承順序。

樣式以下的時候結果是紅色：

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

樣式有了重疊性。當標籤選擇器和類選擇器同時在的時候，類選擇器覆蓋了標籤選擇器的：

    <style>
        p{color: red}
        .active{color: yellow} </style>

是類選擇器和標籤選擇器放的位置前後致使的麼？那麼我調換順序試試：

    <style>
        .active{color: yellow}
        p{color: red}
    </style>

結果仍是現實類選擇器的。由上可知，內嵌樣式中，繼承的順序是類選擇器優先於標籤選擇器，實際類選擇器權重10，標籤選擇器權重1

當標籤選擇器，類選擇器，id選擇器都在時，顯示的是id選擇器裏的。 #id選擇器的權重其實是100，權重更大些。在行內寫的style是1000

    <style> #active{color: blue}         .active{color: yellow}
        p{color: red}
    </style>

上面三個裏id選擇器權重最大，優先級高，那我用它再來作比較：

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p標籤*/
    </style>

結果是下面那個優先。類選擇器#active{}是100,　#box1 p{}類選擇器是100+1=101的權重，優先於單獨的類選擇器。　

再看下面的優先級：

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p標籤*/
        #box1 .wrap2 .wrap3 p{color: gold}
    </style>

先比id,以前id選擇器沒有的把它去除掉了；而後再看id選擇器後面的選項，結果是下面那個優先

再看下面的：

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p標籤*/
        #box1 .wrap2 .wrap3 p{color: gold}
        #box1 #box2 {color: green} </style>

結果仍是gold。gold和green對比：它們都有id選擇器。繼承來的權重爲0#box1 #box2 {color: green}，若是選中p標籤了的，就按這個規則來，若是沒有選中，那就看繼承不繼承，跟繼承不要緊那就忽略掉。繼承的權值爲0，那麼若是是同時繼承來的怎麼辦呢？

看下面這個

    <style>
        #box1 #box2 {color: green}
        #box1 #box2  .wrap3{color: brown}
    </style>

越接近的權值越大

6.3繼承總結

綜上

繼承性：在css有某些屬性是能夠繼承下來，color,text-xxx,line-height,font-xxx是能夠繼承下來

權重比較規則：

繼承來的屬性權重爲0

前提是選中了標籤權重比較；

　　1.數選擇器數量： id 類標籤誰大它的優先級越高，若是同樣大，後面的會覆蓋掉前面的屬

　　2.選中的標籤的屬性優先級用於大於繼承來的屬性，它們是沒有可比性

　　3.同是繼承來的屬性

　　　　3.1 誰描述的近，誰的優先級越高

　　　　3.1 描述的同樣近，這個時候纔回歸到數選擇器的數量

6.4其它繼承栗子

1）

    <style>
        #box1 .wrap2 .wrap3 p{color: gold} #100 10 10 1
        #box1 #box2  .wrap3{color: brown}  #100 100 10 權值大，如何解釋？？？
    </style>

2）

    <style>
        #box1 .wrap2 .wrap3 p{color: gold}
        #box1 #box2  .wrap3 p{color: brown} #權值大
    </style>

或者

    <style>

　　　　#box1 #box2  .wrap3 p{color: brown}   # 100 100 10 1  #權值大

　　　　#box1 .wrap2 .wrap3 p{color: gold}    #100 10 10 1
        
    </style>

    <style>
        #box1 .wrap2 #box3 p{color: gold}   #100 10 100 1
        #box1 #box2  .wrap3 p{color: brown}  #100 100 10 1 權值相等，誰在後就是誰麼？
    </style>

    <style>
        #box1 #box2  .wrap3 p{color: brown} #100 100 10 1 
        #box1 .wrap2 #box3 p{color: gold}  #100 10 100 1  權值相等麼？
    </style>

在這種狀況下誰在下面就是誰

4）數選擇器兩個優先級高的id選擇器

    <style>
        #box1 .wrap2  .wrap3{color: gold}  #調換過順序沒有變
        #box1 #box2  .wrap3 {color: brown}
    </style>

5）！importent不經常使用，大多調試

    <style>
        #box1 .wrap2  .wrap3{color: gold !important;}
        #box1 #box2  .wrap3 {color: brown}
    </style>

6）即便!important也比不過行內的

    <style>
        #box1 .wrap2  .wrap3{color: gold !important;}
        #box1 #box2  .wrap3 {color: brown}
    </style>


 <p id="active" class="active" style="color:blueviolet">魔降風雲變</p>