css三大特性:层叠性、继承性、优先级

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

  • 1. 层叠性
  • 2. 继承性
  • 3. 优先级

1. 层叠性

当元素样式发生冲突时,遵循就近原则
就近原则:那个样式离结构近,就使用哪个样式

(1)代码编写:

<style>
  div {
    background-color: red;
  }
  div {
    background-color: greenyellow;
  }
style>
<body>
  <div>hello, JavaScript!div>
body>

(2)结果展示:
css三大特性:层叠性、继承性、优先级_第1张图片

2. 继承性

元素可以继承父元素的样式:
以text-,font-,line-开头的,以及color属性都可以继承

(1)代码编写:

<style>
  div {
    font-family: 'Courier New', Courier, monospace;
    color: grey;
    text-align: center;
    line-height: 30px;
  }
style>
<body>
  <div>
    <p>hello!p>
  div>
body>

(2)显示效果:
css三大特性:层叠性、继承性、优先级_第2张图片

3. 优先级

1.优先级产生的原因:同一个元素指定了多个不同的选择器

2.使用情形:

  • 元素的选择器相同,使用层叠性
  • 元素的选择器不同,比较选择器的权值,使用权值大的选择器样式

3.选择器的权重顺序:

选择器 权重
!important ∞(无穷大)
style=""行内样式 1, 0, 0, 0
id选择器 0, 1, 0, 0
类选择器( . )、伪类选择器( : )、属性选择器([ ]) 0, 0, 1, 0
元素选择器、伪元素选择器 0, 0, 0, 1
继承 / 通配符选择器( * ) 0, 0, 0, 0

4.代码演示效果:

4.1、代码演示:

<style>
  ul li {
    color: red;
  }
  .nav li {
    color: skyblue;
  }
style>
<body>
  <ul class="nav">
    <li>oneli>
    <li>twoli>
    <li>threeli>
  ul>
body>

4.1、显示效果:类选择器权重 > 元素选择器权重
css三大特性:层叠性、继承性、优先级_第3张图片
4.2、代码演示:

<style>
  #nav {
    color: red;
  }
  .one {
    color: green;
  }
  
style>
<body>
  <ul id="nav">
    <li class="one">oneli>
    <li>twoli>
    <li>threeli>
  ul>
body>

4.2、显示效果:类选择器权重 > 继承权重
css三大特性:层叠性、继承性、优先级_第4张图片
4.3、代码演示:

<style>
  #nav .one{
    color: red;
  }
  .one {
    color: blue !important;
  }
  
style>
<body>
  <ul id="nav">
    <li class="one">oneli>
    <li>twoli>
    <li>threeli>
  ul>
body>

4.3、显示效果:!important的权重最高
css三大特性:层叠性、继承性、优先级_第5张图片
4.4、代码演示:

<style>
  #nav .one{
    color: red;
  }
style>
<body>
  <ul id="nav">
    <li class="one" style="color:purple;">oneli>
    <li>twoli>
    <li>threeli>
  ul>
body>

4.4、显示效果:行内样式权重 > id选择器权重
css三大特性:层叠性、继承性、优先级_第6张图片

你可能感兴趣的:(#,css,css,css3,前端)