正文

前端学习--css--选择器的优先级

西北野狼  2022-02-08  307

关键词：

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
优先级的规则

内联样式，优先级 1000
id选择器，优先级 100
类和伪类，优先级 10
元素选择器，优先级 1
通配* ，优先级 0
继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。

并集选择器的优先级是单独计算
div , p , #p1 , .hello{}

可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important

分别测试下这6种情况：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .p1 {
                background-color: yellow;
            }
            
            p {
                background-color: red;
            }
            
            * {
                font-size: 50px;
            }
            
            p {
                font-size: 30px;
            }
            
            #p2 {
                background-color: yellowgreen;
            }
            
            p#p2 {
                background-color: red;
            }
            
            .p3 {
                color: green;
            }
        </style>
    </head>

    <body>

        <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
            <span>我是p标签中的span</span>
        </p>

    </body>

</html>

background-color:

p#p2 :继承的样式，没有优先级；

*p:通配* 优先级0；

p :元素选择器，优先级 1；

.p1:类和伪类，优先级 10；

p2 优先级 100；

style="background-color: orange;"优先级1000；

因此背景颜色为 organge。

color：

p3:因为只有这一个设置color因此绿色。

第四次学习(代码片段)

1.学习前端的第四天用时：5小时学习内容：零基础学院第四天学习目标：内容较多没有完全掌握2.背景，边框，列表，链接相关属性3.CSS各种选择器的概念，使用方法及使用场景4.CSS选择器的优先级查看详情

前端-css

...性选择器伪类选择器伪元素选择器分组与继承CSS选择器的优先级属性高度宽度字体属性文字属性背景属性边框属性borderdisplay属性css盒子模型padding内边距margin外边距float属性overflow溢出属性position属性z-index属性opacity透明属性CSS总... 查看详情

css选择器的优先级

其中！import不算做选择器，他只是把样式的优先级提高。查看详情

前端学习~css学习：样式表和选择器

...展选择器：后代选择器、交集选择器、并集选择器CSS样式优先级CSS概述CSS：CascadingStyleSheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样查看详情

css选择器的优先级-css选择器世界

1对于优先级的计算，数值计数法：每一段css语句的选择器都对应一个具体的数值，数值越大，优先级越高，其中的css语句将被优先渲染。其中：出现一个0级选择器，优先级数值+0；出现一个1级选择器，优先级数值+1；出现一个2... 查看详情

css选择器的优先级

选择器的优先级表述为4个部分，用0,0,0,0表示。!important行间--1,0,0,0ID选择器--0,1,0,0类选择器(例如,.example)、属性选择器（例如, [type="radio"]）或伪类（例如,:hover）--0,0,1,0元素（例如,h1）和伪元素（例如,:before）--0,0,0,1通配选择... 查看详情

css选择器的优先级

...看地址(https://www.cnblogs.com/hleisurely/p/12836777.html)1.选择器的优先级!important的优先级别最高权重值为1111用来提升某个直接选中标签的选择器中某个属性的优先级的，可以将被指定的属性的优先级提升为最高第一等级：内联样式如:sty... 查看详情

css选择器的优先级问题

原文:css选择器的优先级问题　　当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢？　　定义的属性有冲突时，浏... 查看详情

css选择器的优先级

1.首先介绍一下CSS内联　　内联css也叫做行级css或行内css，它是直接在标签内使用1<body>2<spanstyle="color:red;">我是span块</span>3</body>2.各种选择器标签选择器：点击这里了解标签选择器ID选择器：点击这里了解ID选择... 查看详情

css选择器的优先级

　　!important作为优先级最高的选择器,在样式仍然有冲突的情况下,依旧要按照优先级顺序进行比较　　-----选择器优先级顺序为: !important>行内样式>ID选择器>类选择器、伪类选择器>元素、为元素、属性选择器>通配... 查看详情

基础篇css你知道多少？(代码片段)

...一件事情。下面就让我把工作中遇到问题分享给大家。css优先级先看下图优先级选择器的优先权解释说明内联样式表的权值最高1000。ID选择器的权值为100。Class类选择器的权值为10。HTML标签（类型）选择器的权值为1。!important权... 查看详情

03前端--css内容

...择器4.分组选择器5.伪类选择器6.伪元素选择器7.选择器的优先级五、CSS相关属性5.1宽和高5.2字体相关查看详情

css选择器的优先级及权重问题css核心问题

1.CSS选择器优先级: !important>行间样式>id>class和属性选择器>标签选择器>通配符选择器注意：[初级工程师水平]2.之所以有优先级问题，归根到底是这些选择器有权重的，权重值越大，优先级越... 查看详情

css选择器的优先级

前端开发-css-上

CSS:1.css的引入方式2.基础选择器3.高级选择器4.选择器的优先级5.伪类选择器6.字体样式7.文本样式8.背景9.盒模型border10.margin11.padding1.css的引入方式<!DOCTYPEhtml><htmllang="cn"><head><metacharset="UTF-8"><title>css的引入方查看详情

css样式表｛二｝

1选择器的优先级　　选择器的优先主要考虑选择器的权重　　可以将各种选择器的权重以数值来表示，数值越大，优先级越高　　选择器权重值标签selector1类选择器10ID选择器100行内样式1000 　　复杂选择器优先级的计算... 查看详情

css强制优先级

...值为10。HTML 标签（类型）选择器的权值为1。 CSS优先级顺序下列是一份优先级逐级增加的选择器列表：通用选择器元素（类型）选择器类选择器属性选择器查看详情

css知多少——选择器的优先级（转）

1.引言　　上一节《css知多少（5）——选择器》最后提到，选择器类型过多将导致一些问题，是什么问题呢？咱们直接举例子说明。　　　　上图中，css中的两个选择器都是针对<span>的，而且两个设置的颜色不一样，这里的... 查看详情