正文

css选择器的优先级

玉狐大神  2022-02-09  778

关键词：

版权声明：本文为博主原创文章，未经博主允许不得转载。

Css01

一、CSS简介
　　a)Cascading Style Sheets 层叠样式表(级联样式表)
　　b)是一个文本文件，不需要编译由浏览器直接执行
　　c)作用是定义网页外观如字体,背景，等。。。
　　d)可以配合JavaScript做出绚丽的效果
二、CSS 特点
　　a)精确的定位准确的控制页面的任何元素
　　b)精细的控制可以做到像素级别的调整
　　c)样式与内容分离便于维护，便于重用
三、使用方法
　　1.内联
　　写在标签内的style属性中的叫做内联
　　例如: <p style="color:yellow">祖传牛皮癣,专治老中医</p>

　　2.内嵌
　　写在head标签的style标签中的属性叫做内嵌
　　例如:
　　<style>
　　　　p{color:red;}
　　</style>
　　3.外联
　　通过外部引入的方式使用
　　例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>
四、基础语法
　　1.CSS 格式选择器负责圈定范围，要修改的元素集合声明由属性名和属性值组成，中间用冒号连接(属性名:属性值)，用于设定具体样式CSS组成由选择器和一个或多个声明组成，多个声明之间用分号选择器{属性名:属性值;属性名:属性值;}

2.CSS 注释Html 注释 样式表里面的注释就一种/* 这里面是注释内容 */注释不能嵌套
　　3.单位
　　　　a)长度单位
　　　　　　i.em 倍数
　　　　　　ii.px: pixel 像素屏幕上显示的最小单位用于网页设计。
　　　　　　iii.PPI（DPI）每英寸的像素点是一个率表示了清晰度精度
　　　　　　iv.Pt 是一个标准的长度单位 1pt=1/72英寸用于印刷行业公式: px = pt*DPI/72;v.cm/mm 厘米/毫米

　　　　b)颜色单位
　　　　　　i.英文名: red green blue 。。。。。
　　　　　　ii.十六进制rgb #000000 - #ffffff
　　　　　　iii.Rgb 数字 (0-255) rgb(255,0,0) 百分比(0-100%) rgb(100%,0%,0%)
　　　　c)URL地址
　　　　　　1.不用引号 url(test.jpg)
　　　　　　2.绝对路径 url(http://www.baidu.com/test.jpg)
　　　　　　3.用单引号 url(‘./test.jpg’)
　　　　　　4.用双引号url(“./test.jpg”)

五、选择器
1.HTML选择器就是使用html元素作为选择器

　　例如: p{color:red}
2.ID选择器使用id值作为选择器
　　使用方式: #id值{声明}
　　例如:#duang{color:red;}
3.Class选择器
　　使用class值作为选择器
　　使用方式:.class值{声明}
　　例如:.butingke{color:red}
　　注意:不要轻易使用id选择器请多使用class选择器进行选择！
4.关联选择器
　　通过一级一级的向下查找得到唯一使用选择器
　　每个选择器之间使用空格隔开
　　例如: ul #zhangsan b{color:red}
5.组合选择器
　　多个选择器组合在一起中间使用逗号分隔
　　例如:p,.pangzi{color:red}

6.伪元素选择器
　　a):link 未访问链接
　　b):hover 鼠标移动到链接上时
　　c):active 鼠标选中的链接
　　d):visited 已访问的链接
　　只有a标签有上面四种伪元素内容

　　除a标签以外的文本标签现在只有两种伪元素内容分别为（hover，active）
　　选择器的优先级: 关联选择器>id选择器>class选择器>html选择器
　　你们下午做一下测试查看一下上面的优先级是否和你测试的优先级一样
　　排除上面的内容
　　离得越近优先级越高（就近原则）

总结，两大点

一 a标签伪类使用的时候是顺序的，不然有的效果出不来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类3</title>
    <style>
        /*1 a:link{color:black;}*/
        /*2 a:visited{color:gray;}*/
        /*3 a:hover{color:red;}*/
        /*4 a:active{color:blue;}*/
        /*顺序不能乱 lvha就按这个来*/
        a:link{color:black;}
        a:visited{color:green;}
        a:hover{color:red;}
        a:active{color:blue;}

        /*除a标签以外的文本现在只能有两个伪元素选择器*/
        .p:hover{color:green;}
        .p:active{color:blue;}
    </style>
            
            
</head>
<body>
    <h1 class="p">我不是a标签的文本标签，看看我的颜色有哪些变化</h1>
    <a href="1.1.html">2_css.html</a>
</body>
</html>

二选择器的优先级

大部分都知道id大于class大于html标签那么联合选择器和他们比那个优先级更高呢，我做了个小测试很有意思大家可以执行看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联合选择器1</title>
    <style>
            li{color:red;}
            
            #a li b{color:blue;}
            #b{color:red;}
    </style>
</head>
<body>
        <ul id="a">
            <li>
                联合选择器大于id<b id="b">大于id</b>
            </li>
            <li>
                英雄联盟<b>英雄是寒冰最屌<b>！！！
            </li>
        </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联合选择器1</title>
    <style>
            li{color:red;}
            
            ul li b{color:blue;}
            #b{color:green;}
    </style>
</head>
<body>
        <ul id="a">
            <li>
                联合选择器大于id<b id="b">大于id</b>
            </li>
            <li>
                英雄联盟<b>英雄是寒冰最屌<b>！！！
            </li>
        </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联合选择器1</title>
    <style>
            li{color:red;}
            
            .c b{color:blue;}
            #b{color:green;}
            .c{color:#987654;}
    </style>
</head>
<body>
        <ul id="a">
            <li class="c">
                联合选择器大于id<b id="b">大于id</b>
            </li>
            <li>
                英雄联盟<b>英雄是寒冰最屌<b>！！！
            </li>
        </ul>
</body>
</html>

第一次：我把b标签定义了两次，一个是联合选择器（有一个id两个标签选择器）个定义；联合选择器大

第二次：我把b标签定义了两次，一个是联合选择器（三个标签选择器）定义，一个是id定义；id大

第三次：我把b标签定义了两次，一个是联合选择器（有一个class一个标签选择器）定义，一个是id定义；id大

那么这其中有什么原理呢？

我多次测试之后发现一个原理

多个联合嵌套的，两个相同定义的比较

先比id，谁id多听谁的；一样再比class谁class多听谁的；一样再比标签选择器，谁标签选择器多听谁的；都一样怎么办，就近原则谁近就听谁的

选择中的，没有选择到的都对比了一下总结了一下就是以下图

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--选择器的优先级

...冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。优先级的规则内联样式，优先级1000 id选择器，优先级100 类和伪类，优先级10 元素选择器，优先级1 通配*，优先级0 继承的... 查看详情

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核心问题

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

css选择器的优先级

css样式表｛二｝

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

css强制优先级

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

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

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

css选择器有哪些，选择器的权重的优先级

1.选择器类型1、ID　　#id2、class　　.class3、标签　　p4、通用　　*5、属性　　[type="text"]6、伪类　　：hover7、伪元素　　::first-line8、子选择器、相邻选择器2.权重计算规则1. 第一等：代表内联样式，如:style=””，权值... 查看详情

css选择器的权重与优先规

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。4个等级的定义如下：第一等：代表内联样式，如:style=””，... 查看详情

css声明的优先级

选择器的特殊性　　选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0,0 　　一个选择器的具体特殊性如下确定　　1、对于选择器给定的ID属性值，加0,1,0,0 　　2、对于选择器中给定的各个类属... 查看详情

选择器的权重与优先规则

...威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关查看详情

css选择器优先级比较

CSS选择器的优先级，一般根据就近原则，更准确一点，根据选择器的权值大小比较，权值越高，则优先级越高。如果加上!important则优先级最高。权值大小:!important1000id100class10属性10伪类10伪元素10标签1通配符*0 查看详情

html中选择器的使用及优先级比较

1.id选择器，其中每个标签的id选择器的值是唯一的<divid="text1">css中用 #text1{ }2.类选择器（class），可以有多个<divclass="text1"></div><divclass="text1text2"></div>css中用 .text{}3. 查看详情

谁动了我的选择器？深入理解css选择器优先级(代码片段)

深入理解CSS选择器优先级😏序言🧐文章内容抢先看🤐一、基础知识1、为什么CSS选择器很强2、CSS选择器的一些基本概念（1）4种基本概念Ⅰ.选择器Ⅱ.选择符Ⅲ.伪类Ⅳ.伪元素（2）CSS选择器的命名空间&... 查看详情