zoukankan      html  css  js  c++  java
  • css的优先级的相关内容

    以前也遇到过有关css优先级方面的问题,突然发现以前了解不够具体,知道了一些新的知识,还有很多不足,希望大家批评指正。

    css样式连接到html的方式可分为内部和外部;内部样式有行内样式和嵌入样式两种,外部样式分为导入式和链接式两种。

    我们先来探讨这四种方式的html编译的先后顺序:

    head:

    <link rel="stylesheet" type="text/css" href="red.css">
    <style>

    @import url(blue.css);
    .top{color: yellow;}
    </style>

    body:
    <div style="color:green;" class="top" >

     toptop

    </div>

    实现的色彩是绿色,即行间的样式是最优先

    经过实验验证,另外三种,根据编译的顺序是从上到下规则,实现的效果是最下面的那个;

    在html内部的样式分布,是我们平时经常用到的,考虑到的。

    首先import!,它是css1定义的语法,但是在IE6中是不能实现的,这就是IE6的几大hack之一,不过在别的浏览器中优先级是最大的。

    接着我们再来聊一下,平时用的css语法的优先级(即他们对应的权重)

    内联样式(即行内样式):1000

    id选择器:100

    类选择器(class):10

    元素选择器(p,span):1

    举个简单的例子:

    head:

    <style>
    .top{color: yellow;}
    .top span{ color:blue;}
    .top span.main{color:red;}
    </style>

    body:

    <div class="top">
    <span class="main">toptop</span>
    </div>

    显示的字体颜色为红色,即遵守下面原则,数字越大,优先级越大

    .top 10

    .top span  10+1

    .top span.main 10+1+10

  • 相关阅读:
    mysql函数基本使用
    django form 组件源码解析
    jwt
    python数据类型 ——bytes 和 bytearray
    汇编基础四 --函数调用与堆栈平衡
    汇编基础之三 -- 汇编指令
    汇编基础之二 -- 寄存器和内存堆栈
    汇编基础之一 -- 位运算和四则运算的实现
    存储过程中的设置语句含义
    (转载)SQL去除回车符,换行符,空格和水平制表符
  • 原文地址:https://www.cnblogs.com/shirely-2014/p/4109042.html
Copyright © 2011-2022 走看看