CSS权重的等级划分与比较

归档   发布于2020年3月22日 10:03:56   图片 0 张   阅读量:37589  
http://17kyun.com/api.php?url=
.redFont
    {
        color:red !important;
    }

CSS权重

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重
1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

重的计算实例

1、实例一:
<style type="text/css">
    div{
        color:red !important;
    }
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000,
所以文字的最终颜色为red
-->
2、实例二:
<style type="text/css">
    #content div.main_content h2{
        color:red;
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!--
第一条样式的权重计算: 100+1+10+1,结果为112;
第二条样式的权重计算: 100+10+1,结果为111;
h2标题的最终颜色为red
-->
p{color:red;} /*标签,权值为1*/
p span{color:green;} /*两个标签,权值为1+1=2*/
p>span{color:purple;}/*权值与上面的相同,因此采取就近原则*/
.warning{color:white;} /*类选择符,权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

css选择器权重列表如下:

权重 选择器

10000  !important(!important并不是选择器,但是权重却是最高的)
1000   内联样式:style=""
100   ID选择器: #idName{...}
10   类、伪类、属性选择器:.className{...} / :hover{...} / [type="text"] ={...}
1   标签、伪元素选择器:div{...} / :after{...}
0   通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)

权值计算公式:

权值 = 第一等级选择器 x 个数,第二等级选择器 x 个数,第三等级选择器 x 个数,第四等级选择器 x 个数;

比较规则:

当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;

 

本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

发表观点
  • 昵称不能为空
  • 邮箱不能为空
  • 还是写点什么卅...

最新文章

比特币分析

比特币入门基础知识 比特币是什么 比特币怎么挖 比特币骗局 比特币交易 比特币怎么样交易 比特币怎样交易 比特币怎么赚钱 比特币账号注册 比特币在中国合法吗 一个比特币要挖多久 最好比特币矿机价格 手机能挖比特币吗 比特币入门基础知识视频 比特币是什…

斗罗大陆第一季

《斗罗大陆》是唐家三少创作的穿越玄幻小说,2008年12月14日-2009年12月13日首发于起点中文网,2009年5月首次出版。《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂,由人修炼为神,最终铲除了斗罗大陆上的邪恶力量,报了杀母之仇,…

Moon老师总结的26个拓展长尾关键词的方法

以下是Moon老师总结的26个拓展长尾关键词的方法: 1、百度指数工具,(可申请账号)监控自己关注的某些词汇。 2、从百度下拉框获取和百度相关搜索选取(注意:如是热门关键词需按周进行数据统计且剔除人工刷的关键词)。 3、辅助工具:Chinaz百度权重…

长尾关键词具有的特征 搜索量非常少,并且不稳定

分析网站的搜索流量和关键词,我们发现: 对于一般小型网站,目标关键词带来的流量占网站总搜索流量的绝大部分。 存在于网站目录页、内容页的关键词也会带来流量,但为数不多。 网站上非目标关键词但也可以带来搜索流量的关键词,称为长尾关键词。 长尾关键词具有的…

看一个站点关键词优化得怎么样,主要通过以下几点

一般情况下,我们看一个站点关键词优化得怎么样,主要通过以下几点: 站点的规模,以及由此决定的关键词定位。 关键词在站点的分布情况。 关键词扩展的挖掘和利用。 首页、目录页、内容页的标题标签是否书写规范。 Description Tag-描述标签、关键…

新人需要注意的关键词分析 了解行业概况

 首先了解选择关键词的基本思路:   1、选择符合自己实力的关键词   2、不选择流量太低的关键词   然后详细解剖关键词分析的过程:   1、了解行业概况   2、行业关键词集合   3、关键词竞争性分析   4、关键词发展规划和流量预计   5、…

网站诊断的必经步骤是什么呢 优化的要素是什么

通过网站诊断步骤,解锁关键词排名要素   网站优化的目的是为了提高排名,那么大家知道企业网站排名优化的步骤有哪些吗?网站诊断的必经步骤是什么呢?优化的要素是什么?下面是潭州教育seo憨憨老师搜集到的内容,希望能帮到大家。 一、企业网站排名优…

网页内容已经更新了,可是快照依然没有更新,该如何去处理

很多客户可能都会遇到这样的问题,网页内容已经更新了,可是快照依然没有更新,这到底是怎么一回事?出现这种情况,该如何去处理?   今天,高端网站建设,高端网站设计老司机:潭州教育SEO憨憨老师为大家阐述快照没有及时更新该咋办。 最好的方法就是…

百度站长工具箱,地图提交站外mip提交

百度站长工具箱,不装啦,摊牌啦 百度站长工具箱,一个工具基本可以解决站长盆友们做百度SEO需要的所有接口工具,软件初级版本已经好了,后会继续优化增加功能! 目前功能介绍: 一、百度主站绑定 1、创建一个新的空白站 2、要绑定的域名解析到这个空白站 3…

神马mip推送软件 神马mip自动推送软件

神马mip推送软件 【神马mip推送-帮助说明】 1、本软件主要用于推送神马泛目录mip提交 2、支持多站一号管理 3、支持子域名批量创建 4、支持站长域名批量删除 5、支持一键刷新token 【工具箱使用说明】 注意~~~:主站需要在站长后台自己设…