CSS三大特性(层叠性、继承性、优先级 附详细案例)

CSS三大特性

1. 层叠性

相同的选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式

  • 原则:样式冲突,就近原则进行执行(覆盖)

2. 继承性

  • 行高的继承:
    子元素继承父元素的行高
/*这个1.5是当前元素文字大小font-size的1.5倍*/
/*这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高*/
 font: 12px/1.5 'Microsoft YaHei';

3.优先级:

当同一个元素指定多个选择器,就会有优先级的产生

  • 选择器相同,则执行层叠性;
  • 选择器不同,根据选择器权重执行;
  • 权重由小到大排序:
    继承或* -> 元素选择器 -> 类选择器/伪类选择器 -> ID选择器 -> 行内样式style="" -> !important
 /*例:ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
 /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
  • a链接浏览器默认指定了一个样式(蓝色有下划线),所以不继承body的样式
  • 复合选择器有权重叠加的问题,但是不会有进位的问题


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        body {
      
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }

        div {
      
            /* 子元素继承父元素body的行高1.5 */
            /* 这个1.5是当前元素文字大小font-size的1.5倍 */
            color: red;
            font-size: 14px;
        }

        div {
      
            color: pink;
        }

        p {
      
            font-size: 16px;
            /* 1.5*16=24 当前的行高 */
        }

        /* li没有手动指定文字大小,则会继承父亲的文字大小12 */
        /* 这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高 */
        .test {
      
            color: red !important;
        }

        #demo {
      
            color: green;
        }

        /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
      
            color: green;
        }

        li {
      
            color: red;
        }

        /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
      
            color: pink;
        }
    style>
head>

<body>
    
    

    
    <div>
        <p>龙生龙,凤生凤,老鼠生的孩子会打洞p>
    div>
    
    <div>粉红色的回忆div>
    <p>粉红色的回忆p>
    <ul>
        <li>我没有指定文字大小li>
    ul>
    
    <div class="test" id="demo" style="color:purple">你笑起来真好看div>
    
    <a href="#">我是单独的样式a>
    
    <ul class="nav">
        <li>大猪蹄子li>
        <li>大肘子li>
        <li>猪尾巴li>
    ul>
body>

html>

更详细语法可以查看CSS教程

你可能感兴趣的:(前端)