css选择器权重、样式继承、默认样式
学过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选择器权重、样式继承、默认样式的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- css去除webkit内核的默认样式
做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- CSS消除button标签的默认样式
button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- CSS 选择器权重计算规则(转)
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
随机推荐
- Centos7 nginx的目录结构与nginx主配置文件解析
一.nginx的目录结构 [root@node nginx_116]# ls client_body_temp conf fastcgi_temp html logs proxy_temp ...
- 在centos7中安装MySQL5.7
1.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2.安装mysql源 yu ...
- PaperReading20200220
CanChen ggchen@mail.ustc.edu.cn Recently I am occupied with something else so today I am going to sh ...
- Prometheus简介【转】
Prometheus简介 Prometheus受启发于Google的Brogmon监控系统(相似的Kubernetes是从Google的Brog系统演变而来),从2012年开始由前Google工程师在 ...
- kafka-console-consumer接收不到flume推送过来的消息
原因和解决方法:需要先启动kafka,再启动flume,两者启动有先后顺序.
- element ui表格表头顺序错乱的问题
因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...
- question1 赋值运算操作符
注意的问题书上讲的很详细了 下面是代码实现,但是VS有一个问题,strcpy安全性较低,虽然可以通脱编译,但是运行会报错,提示用strcpy_s()替代,但是,这里用strcpy()替代也不行, // ...
- 如何书写高效的MySQL查询？
How to write efficient MySQL query statements WHERE子句中的书写注意事项 模糊查询(like)时需要注意的事项 索引 字段类型 表连接时的注意事项 其 ...
- 081、Java数组之数组传递
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- IOS UIKIT_EXTERN, __attribute__((visibility ("default"))) 是啥玩意？
问题提出 在学习IOS时候,碰到一个函数NSStringFromCGPoint (UIGeometry.h) 其原型是 UIKIT_EXTERN NSString *NSStringFromCGPoi ...