学过css的小伙伴都是指css选择器的权重

!important 　　Infinity
行间样式 　　 1000
id 　　　　　  100
class|属性|伪类 10
标签|伪元素 　　 1
通配符　　　　　0

权重相同

相同css文件：写在后面的起作用
不同css文件：后导入的起作用

但今天遇到一个问题

<body>

    <div style="color: red">

        <span>123</span>

    </div>

</body>

却是这样的

div上设置的样式并没有对span上的标签起作用
原因就是

我在通配符上设置了颜色

*{

            padding: 0;

            margin: 0;

            color: #3c3c3c;

        }

span并没有继承div的样式，而是使用了通配符的样式

这就说明只有当自身没有样式定义时才会去继承样式

<div style="color: red">

        <a href="#">123</a>

    </div>

很明显，默认样式也是对自身样式的定义，所以有默认样式的时候也无法继承样式

综上可以理解为

　　权重：通配符>默认样式>继承样式

css选择器权重、样式继承、默认样式的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  3. css去除webkit内核的默认样式

    做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  6. CSS消除button标签的默认样式

    button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...

  7. CSS 选择器权重计算规则

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  8. CSS选择器权重计算规则

    从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...

  9. CSS 选择器权重计算规则(转)

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

随机推荐

  1. Python 基础之匿名函数 迭代器和高阶函数

    一.匿名函数 lambda表达式 用一句话来表达只有返回值的函数,叫匿名函数特点:简洁方便语法:lambda 参数: 返回值 1.不带有参数的lambda表达式 def func():    retu ...

  2. 设计模式课程 设计模式精讲 14-2 组合模式coding

    1 代码演练 1.1 代码演练1(组合模式1) 1.2 代码演练2(组合模式1之完善) 1 代码演练 1.1 代码演练1(组合模式1) 需求: 打印出木木网的课程结构, 我们用一个组建类作为接口,课程 ...

  3. react 开发 vscode需要安装的开发插件

    1.npm Intellisense  有自动补全的功能    var lodash = require('lodash') 2. path Intellisense 自动补全文件名 import C ...

  4. Django:验证码相关问题

    http://blog.csdn.net/csapr1987/article/details/7728315 https://zhidao.baidu.com/question/13837387222 ...

  5. java学习-循环结构-查找算法-顺序查找

    今天回顾了简单算法,顺序查找.发现了数组出现重复数字,无法输出第二个位置就跳出循环了. 利用所学知识解决了.放上代码,同时在代码里给大家分享思路. 欢迎大神教导,欢迎指正. ; System.out. ...

  6. VirtualBox安装Debian

    1.下载Debian的dvd1,按照http://www.jb51.net/os/85858.html网上教程安装Debian 1.1.我创建了20G的虚拟磁盘,分区的时候我分了3个区,2G交换空间, ...

  7. MyEclipse 8.5整合Git，并在Github上发布项目

    我们在闲暇时间想加入些团队做点属于自己有意义的东西,那Github就是为你准备的.但是用惯SVN的我们就得学习学习了. 工具/原料 myeclipse8.5 github 方法/步骤 1 下载Ecli ...

  8. 学习angularJs(1)--引用文件

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">< ...

  9. git/github使用详解

    介绍:gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. 2018年6月4日,微软宣布,通过75亿美元的股票交易收购代码托管平台Gi ...

  10. centos7安装mariadb（mysql）

    centos7 默认可以yum -y install mariadb-server mariadb mariadb-client mariadb-devel 如果出现错误 GPG key retrie ...