第四节 CSS的三大特性

来源：互联网发布：传奇盗号软件编辑：程序博客网时间：2024/04/27 20:19

4.1继承

子代可以直接使用父代的某些样式（特征），比如人可以从父母继承姓、肤色等，但性格不能继承。

CSS中也有继承特性

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            font-size:24px;
            color:red;
         }
    </style>
</head>
<body>
    <div id="div1">
        这是div1中的内容
        <div id="div2">
            这是div1的后代div2中的内容
        </div>
    </div>
</body>

结果显示为红字

div2虽然没有设定这种样式，但是实际上却使用了该样式，说明该样式是从它的父代div1那里继承而来。

通过开发者工具可以进一步佐证继承的存在

但并不是所有的属性都可以继承

#div1{
    font-size:24px;
    color:red;
    border:2px solid green;
}

结果为

从结果反映出来，div2并没有边框，也就是说border没有被继承。可以进一步通过开发者工具来佐证。

有些属性能被继承

4.2层叠性

例如：华鑫公司发了两条通知，

通知一

为祝贺华鑫成功上市，经董事会讨论决定，所有华鑫员工本月发奖金500元。

通知二

为庆祝中国共产党成立96周年，公司决定给每位党员加发补助96元。

华鑫员工张三（中共党员）可以领取到奖金500元+补助96元

因为选择器一（华鑫员工）和选择器二（党员）都选中张三了，那么他可以领取的福利就可以进行叠加。

CSS中也支持叠加，但名词为层叠。

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            font-size:24px;
        }
        #div1{
            color:red;
        }
    </style>
</head>
<body>
<div id="div1">张三（党员）</div>
<div id="div2">李四</div>
</body>

结果显示为

从结果可以得出结论：“张三”的最终样式来自于两个样式的层叠，“开发者工具”也进一步佐证了这一点。

4.3优先级

在现实生活中当多条相互冲突的规则施加到同一事物时，也必须指定一个规则，也就是优先级。

从系列实验中可得出CSS选择器优先级的结论

内联>id选择器>类选择器>元素选择器

内部样式>外部样式

阅读全文

0 0