概念：所謂CSS的繼承是指被包在內部的標籤將擁有外部標籤的樣式性質，它是依賴於祖先-後代的關係的。繼承特性最典型的應用通常發揮在整個網頁的樣式預設，需要指定為其它樣式的部份設定在個別元素裡即可。

css規則告訴瀏覽器如何去渲染HTML頁面上特定的元素，css規則由兩大部分組成，選擇器+宣告塊，如：body{color:red;}

color屬性的繼承
案例1：//body{color:red;}
 <p>>父級P<strong class="class_s" id="id_s">子級strong</strong>父級P</p>
 <ul>
        父級ul
         <li>子級li1</li>
         <li>子級li2</li>
        父級ul結束
     </ul>

html文件樹的理解，請看圖: 文件樹.png

list-style屬性的繼承
案例2：ul{list-style:none} li{list-style:none}

優先順序（權值越大優先順序越高）來確定css規則繼承指定的值：
1、宣告的權值比繼承過來的權值高；
案例4：ul{color：pink} li{color:lightblue}

2、多種樣式混合應用時的優先順序如下：
內聯樣式 > id選擇器 > class選擇器和偽類選擇器 > 元素選擇器和偽類元素選擇器 > 萬用字元選擇器 > 外聯樣式
案例5： strong{color:black}
 .class_s{color:wheat}
  #id_s{color:blue}

3、在文件中出現的順序，越在後面出現的，優先順序越高
案例5：  strong{color:black} strong{color: lawngreen}

4、人為定義CSS繼承優先順序（important規則）通過在一條規則的分號前插入！important這樣一個短語來標記一條重要規則
 其優先順序最高
案例6：strong{color:black !important}

並非所有的屬性是繼承的，例如boder,width,display等屬性就不能繼承
案例7： p{border:1px solid;width:200px}
 <p>父級P<strong>子級strong</strong>父級P</p>
<script>
     var p=document.getElementsByTagName("p")[0];
        var num=0;
        function bul(){
            if(num==0){
                p.style.display="none";
                num=1;
            }
            else{
                p.style.display="block";
                num=0;
            }

        }
    </script>
 

下面總結了一些關於樣式表的屬性是否繼承：
1、字型（Font）
繼承性——有：font、color、font-family、font-size、font-size-adjust、font-stretch 、font-style 、font-style 、text-underline-position 、font-variant 、 text-transform line-height、letter-spacing 、word-spacing               
     
繼承性——無：text-decoration 、text-shadow

2、文字（Text）
繼承性——有：text-indent 、text-align 、layout-flow 、writing-mode 、white-space 、word-wrap 、text-kashida-space 、layout-grid 、layout-grid-char 、layout-grid-char-spacing 、layout-grid-line 、layout-grid-mode 、layout-grid-type

繼承性——無：text-overflow 、vertical-align 、direction、unicode-bidi 、word-break 、line-break 、text-autospace、text-justify 、ruby-align 、ruby-overhang 、ruby-position 、ime-mode 、

3、背景（Background）
繼承性都為無：
background、background-origin 、background-clip 、background-size 、background-attachment 、background-color、background-image 、background-position 、background-positionX 、background-positionY 、background-repeat 、layer-background-color 、layer-background-image 

4、定位（Position）
繼承性都為無：
position 、z-index 、top、right 、bottom 、left

5、尺寸（Dimensions）
繼承性都為無：
height 、max-height 、min-height 、width、max-width 、min-width

6、佈局（Layout）
繼承性都為無：
clear 、float、clip 、overflow、overflow-x、overflow-y、display、visibility

7、外補丁（Margins）
繼承性都為無：
margin 、margin-top 、margin-right 、margin-bottom 、margin-left

8、輪廓（Outlines）
繼承性都為無：
outline、outline-color 、outline-style 、outline-style 、outline-width

9、邊框（border）
繼承性都為無：
border、border-color 、border-style 、border-image 、border-radius 、box-shadow、border-width 、border-top 、border-top-color 、border-top-style 、border-top-width 、border-right 、border-right-color 、border-right-style 、border-right-width 、border-bottom 、border-bottom-color 、border-bottom-style 、border-bottom-width 、border-left 、border-left-style 、border-left-width

10、內補丁（Padding）
繼承性都為無：
padding 、padding-top 、padding-right 、padding-bottom 、padding-left

 
11、列表（Lists）
繼承性——有：list-style 、list-style-image 、list-style-position 、list-style-type

繼承性——無：marker-offset

12、表格（Tabble）
繼承性都為有：
border-collapse 、border-spacing 、caption-side 、empty-cells 、table-layout 、speak-header

13、其他
繼承性都為無：
cursor、zoom