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>

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

综上可以理解为

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

原文地址:https://www.cnblogs.com/angle-yan/p/12258334.html

时间: 2024-08-28 04:54:34

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

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

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

css去除webkit内核的默认样式

做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和select样式里加入上面css,效果如下图. css代码如下: input{ background:#FF9933; border-radius:5px; color:#fff; padding:3px 20px; -webkit-appearance:none; } select{ backgroun

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

select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select> </div> 给select添加父元素div目的是为了,

CSS选择器权重计算

权重计算规则 内联样式,如: style=" ",权值为1000. ID选择器,如:#content,权值为0100. 类,伪类和属性选择器,如.content,权值为0010. 类型选择器和伪元素选择器,如div p,权值为0001. 通配符.子选择器.相邻选择器等的.如*.>.+,权值为0000. 继承的样式没有权值. 权值越大,权重越高 !important !important 用来提升优先级,加了这句的样式的优先级是最高的. 原文地址:https://www.cnblo

CSS 选择器权重计算规则

CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. 选择器的分类 正式计算选择器权重之前,先来看选择器是如何被分类的. 因为 CSS 选择器众多,在计算时,这些选择器被归为了三大类,按其权重由大到小依次为: ID 选择器:比如 #dialog 元素类型选择器(type selector)和伪选择器(pseudo selector):比如 h1,::

CSS选择器权重计算规则

1.第一等:代表内嵌样式:如:style=" ",权重值为10000. 2.第二等:代表ID选择器:如:#content,权重值为0100. 3.第三等:代表类,伪类和属性选择器:如:.content,权重值为0010. 4.第四等:代表元素和伪元素选择器:如:div p,权重值为0001. 5.第五等:代表通配符,子元素选择器和相邻兄弟选择器等:如:*.>.+,权重值为0000. 6.继承的样式没有权重值. 7.!important; !important的作用是提升优先级,换

css取消input、select默认样式(手机端)

IOS端: border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏览器(包括微信)内置浏览器下 还会有箭头以及高亮的线框,要除去这个可以使用 1 -webkit-appearance: none; 取消webkit默认的样式. 我们将input.select框设为透明的目的就是为了方便使用设计师制作的样式(即使差1.2个px没对齐也不会察觉) 注意:select的下拉框的样式跟具各个浏览器的不同都不会不同.这里就不研究了!

解决devexpress新建的Form窗体没有继承默认样式的问题

public partial class FrmMain : DevExpress.XtraEditors.XtraForm 只要在项目中的Program.cs中添加如下两句即可: DevExpress.Skins.SkinManager.EnableFormSkins(); DevExpress.Skins.SkinManager.EnableMdiFormSkins();

css知多少(4)——解读浏览器默认样式

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的