CSS——继承性和层叠性

来源：互联网发布：首都医科大学知乎编辑：程序博客网时间：2024/06/15 01:01

继承性
有一些属性，当给自己设置的时候，自己的后代都继承上了，如color、text-开头的、line-开头的、font-开头的。

    <style type="text/css">        div{            color:blue;            border: 2px solid red;        }    </style></head><body>    <div>        <p>我是段落</p>        <p>我是段落</p>        <p>我是段落</p>    </div></body>

不是所有属性都能够继承，如上图，color属性会被继承，但border属性没有被全部继承。总结：关于文字样式的都能够继承，关于盒子、定位、布局的属性都不能继承。

如果我们页面的文字都是灰色，都是14px，那么就可以利用继承性：

body{    color:gray;    font-size:14px;}

继承性是从自己开始，直到最小元素。
如：

    <style type="text/css">        div{            color:blue;            font-style:italic;            text-decoration: underline;            font-weight:bold;            background-color:yellow;        }    </style></head><body>    <div>        <div>            <div>                我是文字                <div>                    我是文字                    <ul>                        <li>                            <span>                                <a href="">                                    我是文字                                </a>                            </span>                        </li>                    </ul>                </div>            </div>        </div>    </div></body>

层叠性即处理冲突的能力

    <style type="text/css">        p{            color:red;        }        .ppage{            color:green;        {        #para1{            color:blue;        }    </style></head><body>    <p class="ppage" id="para1">我到底是什么颜色？</p></body>

以上句子是绿色。

    <style type="text/css">        #box1 .hezi2 p{            color:red;        }        div div #box3 p{            color:green;        }        div.hezi1 div.hezi2 div.hezi3 p{            color:blue;        }    </style></head><body>    <div class="hezi1" id="box1">        <div class="hezi2" id="box2">            <div class="hezi3" id="box3">                <p>我到底是什么颜色？</p>            </div>        </div>    </div></body>

以上句子是红色。
解析：
一个id选择器，一个类选择器，一个标签选择器，记作1,1,1
一个id选择器，0个类选择器，三个标签选择器，记作1,0,3
0个id选择器，3个类选择器，4个标签选择器，记作0,3,4
当选择器选择上了某个元素时，要分别数一下id选择器、类选择器和标签选择器的数量。按照稀有程度，id的权重大于类，类大于标签。

如果权重一样，则以后者为准，由于p标签在后，所以是红色：

    <style type="text/css">        #box2 div .pp{            color:blue;        }        #box1 .hezi2 p{            color:red;        }    </style>

如下所示，第一个选择器的权重是0,0,13，第二个选择器的权重是0,1,0。不进位，所以是蓝色：

    <style type="text/css">        div div div div div div div div div div div div p{            color:red;        }        .heng{            color:blue;        }    </style></head><body>    <div>        <div>            <div>                <div>                    <div>                        <div>                            <p class="heng">                                我到底应该是什么颜色嗷嗷嗷                            </p>                        </div>                    </div>                </div>            </div>        </div>    </div>

如下所示，权重一样，则以后出现的那个为准，所以是蓝色：

    <style type="text/css">        #box1 .hezi2 p{            color:red;        }        #box2 div .pp{            color:blue;        }    </style></head><body>    <div class="hezi1" id="box1">        <div class="hezi2" id="box2">            <div class="hezi3" id="box3">                <p class="pp">那我到底是什么颜色啊</p>            </div>        </div>    </div></body>

如下所示，这样的话依然是红色，因为第一个选择器权重是0,1,2，第二个选择器权重是0,1,0：

    <style type="text/css">        .nav ul li{            color:red;        }        .teshu{            color:blue;        }    </style></head><body>    <div class="nav">        <ul>            <li class="teshu">word</li>            <li>word</li>            <li>word</li>        </ul>    </div></body>

如果以上字体想变成蓝色，则可以将CSS编辑器改成：

    <style type="text/css">        .nav ul li{            color:red;        }        .nav ul li.teshu{            color:blue;        }    </style>

如下所示，p标签应该是蓝色，因为如果不能直接选中某个元素，而是通过继承性影响的话，则权重是0：

    <style type="text/css">        #box{            color:red;        }        p{            color:blue;        }    </style></head><body>    <div id="box">        <p>哈哈哈哈</p>    </div></body>

在开始数权重之前，一定要看是不是真的选中了文字所在的最内层标签，如果不能直接选中某个元素，而是通过继承性影响的话，那么权重是0。如下所示，没有选中p，所以权重为0，应是绿色：

    <style type="text/css">        #hezi1 #hezi2 #hezi3{            color:red;        }        div.box div.box div.box{            color:blue;        }        p{            color:green;        }    </style></head><body>    <div class="box" id="hezi1">        <div class="box" id="hezi2">            <div class="box" id="hezi3">                <p>猜我啥色</p>            </div>        </div>          </div></body>

html内容不变，css选择器变成如下所示，则是黄色：

    <style type="text/css">        #hezi1 #hezi2 #hezi3{            color:red;        }        div.box div.box div.box{            color:blue;        }        div.box div.box div.box .pp{            color:yellow;        }        p{            color:green;        }    </style>

如果大家权重都是0，则有就近原则——谁描述的近就听谁的：
上述html内容不变，css选择器变成如下所示，显示红色：

    <style type="text/css">        #hezi3{            color:red;        }        #hezi1 #hezi2{            color:blue;        }    </style>

hezi1、hezi2只描述到了倒数第三层，而hezi3描述到了倒数第二层，hezi3描述的更接近。

总结：先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重，谁大听谁的，如果都一样，则以后写的为准。如果没有选中，那么权重是0。如果大家都是0，那么无需数标签数量，无需看谁是后写的，只需遵循则就近原则。

阅读全文

0 0