CSS学习笔记 | CSS三大特性

CSS三大特性


本文内容:
CSS三大特性:
	1. 层叠性
	2. 继承性
		2.1 CSS中的继承
		2.2 一种特殊的继承:行高的继承
	3. 优先级
	4. 优先级权重小练习

CSS三个非常重要的特性:层叠性继承性优先级

1、层叠性

相同的选择器如果对相同的样式进行了设置,那么就会产生冲突,层叠性主要就是解决冲突的问题。

遵循的原则:

  • 就近原则:哪个样式离结构近,就执行哪个样式。
  • 样式如果不冲突,就不会重叠

例如:

<style>
	div {
          color: red;
          font-size: 16px;   /*由于字体样式没有冲突,所以会正常显示*/
        }
     div {
   	      color: blue;    /*根据就近原则,颜色会是蓝色*/
       }
   style>
<body>
    <div>
        我到底是红色还是蓝色呢?
        没错,我会是蓝色的!
    div>
body>

2、继承性


2.1 CSS中的继承

子标签会继承父标签的某些样式,如:文本颜色,字号等

例如:

<style>
    div {
        color: red;
        font-size: 16px;
    }
style>

<body>
    <div>
        <p>
            我会继承div爸爸的属性,所以我是红色的。
        p>
    div>
body>

注意:

  1. 恰当地使用继承可以简短代码量
  2. 子元素可以继承父元素的某些样式( text- font- line-这些元素开头的可以继承,一级 color 属性)

2.2 一种特殊的继承:行高的继承


如下代码:
<style>
    body {
        color: blue;
        font: 16px/1.5 'Mircosoft YaHei';  
        /*这里的1.5含义是 子元素的行高是当前文字大小的1.5倍 */
    }
    div {
        font-size: 14px;
    }
style>
<body>
    <div>
        我的颜色是蓝色,因为我继承了body爸爸属性
        那我的行高是多少呢?
        答案是: 14 * 1.5 = 21 px
    div>
body>

再看一种情况:

<style>
    body {
        color: blue;
        font: 16px/1.5 'Mircosoft YaHei';  
        /*这里的1.5含义是 子元素的行高是当前文字大小的1.5倍 */
    }

style>
<body>
    <div>
        <ul>
            <li>
                我没有指定文字大小欸,但是我会继承body的文字大小16px,所以行高就是16*1.5=24px
            li>
        ul>
    div>
body>

如此设置 1.5 的好处是:里面的子元素可以根据自己的文字大小自动地调整行高。


3、优先级

当一个元素指定了多个选择器,那么就会存在优先级的问题

  • 若选择器相同,则根据层叠性
  • 若选择器不同,则根据选择器权重执行

如表:

选择器 选择器权重
继承或* 0,0,0,0
元素选择器 0,0,0,1
类选择器、伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style = “” 1,0,0,0
!important 无穷大

权重从上至下依次变大

例如:

<style>
    .test {
        color: red;
    }
    div {
        color: blue;
    }
style>
<body>
    <div class="test">
        我是蓝色还是红色呢?
        由于类选择器的权重更大,所以我是红色的。
    div>
body>

<style>
    .test {
        color: red;
    }
    div {
        color: blue!important;
    }
style>
<body>
    <div>
        我是蓝色还是红色呢?
        由于存在!important,所以我是蓝色的。
    div>
body>

优先级注意点:

  1. 权重有四组数字组成,但不会有进位,可以理解为:类选择器永远大于元素选择器,以此类推

  2. 等级判断从左至右,如果某一位数值相同,则判断下一位

  3. 继承的权重是0,举个例子:

    <style>
        #father {
            color: blue;
        }
        p {
            color: red;
        }
    style>
    <body>
        <div id="father">
            <p>
                我其实是红色,因为继承的权重为零,我不会继承div爸爸的蓝色
            p>
        div>
    body>
    

  4. 注意链接标签的特殊情况

<style>
    body {
        color: red;
    }
style>
<body>
    <a href="#">
    	你以为我继承了body的红色?你错了!
        我由浏览器默认指定成了 蓝色、有下划线。
        如果要修改我,要单独对我进行修改
    a>
body>

  1. 权重的叠加

    <style>
        /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: blue;
        }
        /* li 的权重是 0,0,0,1 */
        li {    
            color: red;
        }
    style>
    <body>
        
    <style>
        /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: blue;
        }
        /* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
       .nav li {    
            color: red;
        }
    style>
    <body>
        

    注意,权重的叠加不会有进位问题!

4、优先级权重小练习:

如何把第一个 li 中的文字改成蓝色?

<style>
    .nav li {
        color: red;
    }
style>
<body>
    <ul class="nav">
        <li>把我改成蓝色li>
        <li>我是lili>
    ul>
body>

你是不是这么想的?直接把第一个 li 中添加一个类选择器然后:

<style>
    .nav li {
        color: red;
    }
    .blue {
        color: blue;
    }
style>
<body>
    <ul class="nav">
        <li class="blue">把我改成蓝色li>
        <li>我是lili>
    ul>
body>

这么做你就错了,因为 .nav li 的权重大于 .blue,所以颜色并不会改变,正确的操作是:

<style>
    .nav li {
        color: red;
    }
    .nav .blue {   			 /*这么做就可以了*/
        color: blue;
    }
style>
<body>
    <ul class="nav">
        <li class="blue">把我改成蓝色li>
        <li>我是lili>
    ul>
body>

返回目录:笔记首页


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