CSS三大特性继承性,层叠性,优先级

一、继承性

1)什么是继承性?

  • 给父元素设置一些属性,子元素/后代也可以使用,这个我们称之为继承性。

2 ) 并不是所有属性都可以继承的,那么有哪些属性具有继承性?

  • 只有以color/font-/text-/line开头属性才可以继承

3) 继承性特殊性

  • a标签的文字颜色和下划线是不能继承的
  • h标签的文字大小是不能继承的

4)继承性应用场景

  • 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体大小等内容

5)案例


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css继承性title>
    <style>
        div{
            color: red;
            font-size: 16px;
            text-decoration: underline;
            background: deepskyblue;
        }
    style>
head>

<body>
<div>
    <p>子元素p>
    <ul>
        <li>
            <p>后代元素p>
        li>
    ul>

    <a href="#">我是a标签a>
    <h1>我是h1h1>
div>
body>
html>

图一子元素继承父元素

CSS三大特性继承性,层叠性,优先级_第1张图片

图二后代元素继承父元素

CSS三大特性继承性,层叠性,优先级_第2张图片

图三a标签的文字颜色和下划线是不能继承的

CSS三大特性继承性,层叠性,优先级_第3张图片

图四h标签的文字大小是不能继承的

CSS三大特性继承性,层叠性,优先级_第4张图片

二、层叠性

1)什么是层叠性?

  • CSS处理冲突的一种能力,这个我们称之为层叠性。

2 ) 什么情况出现层叠性?

  • 只有在多个选择器中“同一个标签”,又设置了“相同的属性”的时候,就会发生层叠性

3) 发生层叠性会怎么样?

  • 当发生层叠性时,哪个选择器设置的属性起作用,是由优先级来确定

三、优先级

1)什么是优先级?

  • 多个选择器可能会选择同一个元素,优先级高的先做,优先级低的后做,这个我们称之为优先级。

2 ) 优先级判断方式有哪些?

  • 是否是直接选中(间接选中就是指继承,如果是间接选中时,就近原则)
  • 直接选中时是相同选择器(则谁写在后面就听谁的)
  • 直接选中时不是同选择器(则就会按照选择器的优先级来层叠)

3)CSS选择器优先级

id > 类 > 标签 > 通配符 > 继承 > 浏览器默认

4)案例

1、间接选中

/* style1*/
<style>
        ul{
            color: red;
        }
style>

/*style2*/
<style>
        ul{
            color: red;
        }
        li{
            color: blue;
        }
style>


<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

style1代码效果如图所示文字为红色

CSS三大特性继承性,层叠性,优先级_第5张图片

style2代码效果如图所示文字为蓝色

CSS三大特性继承性,层叠性,优先级_第6张图片

2、直接选中时是相同选择器

/* style1*/
<style>
         p{
             color: red;
         }
         p{
             color: blue;
         }
style>

/*style2*/
<style>
        p{
             color: blue;
         }
        p{
             color: red;
         }
style>


<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

style1代码效果如图所示文字为蓝色

CSS三大特性继承性,层叠性,优先级_第7张图片

style2代码效果如图所示文字为红色

CSS三大特性继承性,层叠性,优先级_第8张图片

3、直接选中时不是同选择器

/* style1*/
<style>

style>

/*style2*/
<style>
       li{
           color: red;
       }
style>


/*style3*/
<style>
      *{
           color: blue;
       }
       li{
           color: red;
       }
style>

/*style4*/
<style>
      p{
           color: green;
       }
      *{
           color: blue;
       }
       li{
           color: red;
       }
style>

/*style5*/
<style>
     .para{
           color: pink;
       }
      p{
           color: green;
       }
      *{
           color: blue;
       }
       li{
           color: red;
       }
style>

/*style6*/
<style>
     #identity{
           color: purple;
       }
     .para{
           color: pink;
       }
      p{
           color: green;
       }
      *{
           color: blue;
       }
       li{
           color: red;
       }
style>




<ul>
    <li>
        <p id="identity" class="para">我是段落p>
    li>
ul>

style1代码效果如图所示文字为浏览器默认的黑色

CSS三大特性继承性,层叠性,优先级_第9张图片

style2代码效果如图所示文字为继承li设置的红色

CSS三大特性继承性,层叠性,优先级_第10张图片

style3代码效果如图所示文字为通配符设置的蓝色

CSS三大特性继承性,层叠性,优先级_第11张图片

style4代码效果如图所示文字为p标签设置的绿色

CSS三大特性继承性,层叠性,优先级_第12张图片

style5代码效果如图所示文字为类设置的粉色

CSS三大特性继承性,层叠性,优先级_第13张图片

style6代码效果如图所示文字为id设置的紫色

CSS三大特性继承性,层叠性,优先级_第14张图片

你可能感兴趣的:(css)