CSS样式优先级

样式优先级

    • 样式优先级
      • 多重样式优先级
      • css 7 种选择器
    • CSS继承性说明:
    • CSS层叠性说明:

样式优先级

多重样式优先级

内联样式 > 内嵌样式表 > 外部样式表 > 浏览器样式表

css 7 种选择器

  • id 选择器
  • 类选择器
  • 伪类选择器
  • 属性选择器
  • 伪元素选择器
  • 通配选择器
  • 标签选择器
  • CSS 优先规则:
  • 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
  • !important 规则例外
    一些经验法则:
    Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
    Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
    Never 永远不要在全站范围的 css 上使用 !important
    Never 永远不要在你的插件中使用 !important

CSS继承性说明:

  • 有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性。

  • 继承性是从当前元素开始,一直到最小的元素。

  • 后代元素能够继承来自祖先元素的文字样式。这些属性包括:**color,text-开头,line-开头的,font-**开头的。

  • 关于盒子、定位、布局的属性,不能被继承。

<style>
        div{
            color: blueviolet;
            font-size: 24px;
            border: 1px solid red;
        }
        span{
            color:cyan;
        }
        /* p{
            border: 1px solid red;
        } */
    style>
<div>
        妖怪我要你助我修行
        <p>大威天龙
            <span>青蛇span>
        p>
    div>

CSS层叠性说明:

  • 样式表:行内式>内嵌式与外链式 (就近原则)
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        p {
            color: blueviolet;
        }
    style>
head>

<body>
    <p style="color: blue;">我是蓝色p>
body>
  • 选择器:ID选择器>类选择器>标签选择器
 <style>
        p {
            color: blueviolet;
        }
        
        #red {
            color: red;
        }
        
        .black {
            color: black;
        }
    style>
 <p id="red" class="black">我是蓝色p>
  • 复杂选择器权重的计算比较数基础选择器的数量:ID选择器的数量 类选择器的数量 标签选择器的数量,ID选择器的权重记为100,类选择器记为10,标签选择器记为1。PS:不进位,255个标签等于一个类名。没有任何实战的意义。

      #box1 .box2 p {
                color: seagreen;
            }
            
            div div #box3 p {
                color: steelblue;
            }
       

    猜猜我是什么颜色?

    猜猜我是什么颜色?

  • 权重相同时,比较书写顺序,在后面的会覆盖前面的。

  1. 并集选择器计算权重时,要分开计算。

  2. 如果不能直接选中元素,通过继承性影响的话,权重为0。

  3. 同一个标签,携带了多个类名,且样式有冲突时,跟类名的顺序无关,和样式的先后顺序有关。

  4. 总结:对于相同的选择器:样式表的排序:行内>内嵌与外链(就近原则), 对于非行内样式表,选择器排序:id>类>标签。

你可能感兴趣的:(笔记,css,css)