CSS包含三大特性,分别是层叠性、继承性、优先级。下面我们一起来看看这些特性。 

层叠性

    层叠性指当一个标签被设置了多个重复的样式时候,并且这些样式具有相同的权重时,CSS会以最后定义的属性的值为准。也就是“后来者居上”原则。

示例: 

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>层叠性title>
        <style type="text/css">
            div{
                width: 30%;
                background-color: dodgerblue;
            }
            div{
                background-color: firebrick;
            }
        style>
    head>
    <body>
        <div>我真的帅div>
    body>
html>

android style 不继承主题样式 css不继承父类样式_css不继承父类样式

    只会覆盖相同的属性的不同样式,不会覆盖不相同的属性,不相同属性最后会合并下来。 

继承性

    继承性是指当子标签没有设置样式时,会继承父标签的样式。

    在CSS中,具有继承性的属性有3大类。

(1)文本相关属性:font-family、font-size、font-style、font-weight、font、line- height、text-align、text-indent、word-spacing

(2)列表相关属性:list-style-image、list-style-position、list-style-type、list-style

(3)颜色相关属性:color

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>继承性title>
        <style type="text/css">
            div{
                width: 30%;
                font-size: 70px;
                background-color: forestgreen;
                color: #ffffff;
            }
        style>
    head>
    <body>
        <div>
            阿巴阿巴阿巴
            <p>我真的帅p>
        div>
    body>
html>

android style 不继承主题样式 css不继承父类样式_权重_02

优先级

    优先级:!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承  

    优先级高的规则会忽视层叠性,忽视就近原则来定义样式。比如定义了!important,即使行内样式离得近,最终生效的还是!important标注的属性。 

CSS引用方式优先级


    行内样式 > (外部样式 = 内部样式)

权重


    权重用于多个选择器混杂来定义样式的时候。

规则:

(1)权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】

(2)继承的权重为(0,0,0,0)

(3)伪元素权重为(0,0,0,1)

(4)标签选择器的权重为(0,0,0,1)

(5)类、伪类选择器的权重为(0,0,1,0)

(6)id选择器选择器的权重为(0,1,0,0)

(7)行内样式的权重为(1,0,0,0)

(8)!important的权重无限大

计算方式:

(1)多个选择器混杂时,权重之和也是用四个数字来组成,每一位的值为多个选择器四个数字的每位之和

(2)权重之和的数字是不会进位的,再多的标签选择器权重加和也抵不过一个类选择器。

(3)多个选择器之间的顺序是无关的,不影响权重之和。

(4)对于并集选择器来说不是权重的加和,因为理论上它还是独立的,它只相当于将多个选择器的相同内容归于一个并集选择器中,理论上每一个选择器还是独立的。

示例: 

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>权重计算title>
        <style type="text/css">
           p{
               background-color: green;
           }
           div .p1{
               width: 30%;
               background-color: blue;
           }
        style>
    head>
    <body>
        <div>
            <p class="p1">我真的帅p>
        div>
    body>
html>

android style 不继承主题样式 css不继承父类样式_css不继承父类样式_03

可以根据上面的计算出权重,再比较。


本节主要学习了CSS特性,最后对其总结。

  • 层叠性
  • 继承性
  • 优先级(权重计算)