正文 

当前位置： 首页 > java > java框架

css中几种选择器和他们的优先级

王文健的Blogs~~!      2022-02-09     242

关键词：

CSS的基本选择器（三种）
id或者class值不能用纯数字表示 可以有 “字母数字-_“
 
1.元素选择器                                         h1{.......}
2.ID选择器      只能作用于一个标签 因为一个页面中的id不能重复       #id1{......} 
 
3.类选择器    可以作用于多个标签                                .class1{......}
 
 
 
 
 
CSS的其他选择器
在不更改内容的情况下（不添加id或class来使用基本选择器）使用其他选择器
后代选择器去掉空格就是交集选择器，4 5中选择器不是必须元素选择器开头
1.通用选择器 *{ margin: 0; padding: 0;} 作用于全部元素
2.交集选择器 #id1.class2{} 选择器1选择器2选择器3........
选择器紧挨着没有间隙 必须同时满足这些选择器的元素才可以被修饰
3.并集选择器 #id1,.class2{} 选择器1,选择器2,选择器3
选择器之间用逗号隔开 满足其中一个选择器就可以被修饰
4.后代选择器 div ul .id1{} .class1 #id1 .class2{}
选择器之前用空格分割 后一个选择器是前一个选择器的后代(包括隔代)才被修饰
5.子代选择器 div>.id1 .class1>#id1{}
后一个选择器是前一个选择器的直接后代才被修饰
6.属性选择器
<input type="password"/> input[type=‘password’]{......}
 
 
 
优先级
第一原则： 近者优先，作用于最里层的选择器，生效
 
同一个标签时： id选择器>类选择器>标签选择器>通用选择器
<div class="class1" id="id1" style="style1"></div>
  1. 标签选择器 占权重1
  2. 类选择器 占权重10
  3. id选择器 占权重100
  4. 行级样式表 占权重1000
  • 当交集后代子代选择器都指向一个标签时 通过权重相加 去高数值的 如果数值相同 则取后一个
  • 并集选择器将代码分开 不能通过权重相加计算
如果4个选择都指向一个标签 则取他们所有的修饰，相同属性的取优先级最高的值

02nginx中几种location表达式的优先级问题(代码片段)

...;name 可以看到的是存在五种写法 从下面文档也可以看出优先级大概是精确匹配>前缀匹配2>正则匹配,忽略大小写正则匹配>前缀匹配1 我们这里核心关注的就是这个顺序是如何实 查看详情

02nginx中几种location表达式的优先级问题(代码片段)

...;name 可以看到的是存在五种写法 从下面文档也可以看出优先级大概是精确匹配>前缀匹配2>正则匹配,忽略大小写正则匹配>前缀匹配1 我们这里核心关注的就是这个顺序是如何实 查看详情

css中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用CSS中的选择器优先级与!important权重使用#.class选择器要高于标签选择器。#id选择器要高于.class选择器。标签选择器是优先级最低的选择器。!important的属性它的权重值优先级最高的，大于... 查看详情

css选择器、优先级以及!important知识总结

...简单讨论下后代元素选择器和子元素选择器的区别示例CSS优先级是指CSS样式在浏览器中被解析的先后顺序。多重样式（MutipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。一般... 查看详情

人脸检測中几种框框大小的选择~

人脸检測应用极为广泛，内部细节也偏多，尤其是涉及到几种类型的框，这几种框的大小之前有着千丝万缕的联系，对检測性能的好坏影响程度大小不一。本篇文章基于自己在人脸检測方面的经验，说说对这些框之间关系的一些... 查看详情

css选择器执行的顺序是啥样的？

有一个公式是可以计算的：css优先级，id加0.1.0.0；类，属性选择器和伪类加0.0.1.0；元素和伪元素选择器加0.0.0.1就你上面说的三个，ID选择器的优先级是最高的，其实是类选择器，最后是元素选择器。如果要提高某个样式的优先... 查看详情

html5中的几种常见选择器

...A每天一更新，这些初级html知识你掌握了吗？css选择器的优先级：作用的元素一样，样式一样，就会有优先级问题。*通配选择器0*标签名选择器1*类选择器10*id选择器100*后代选择器选择器1选择器2...（会有相加的过程）*群组选择... 查看详情

css选择器的权重与优先规

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

css选择器

...择器：分组和嵌套伪类选择器：伪元素选择器：选择器的优先级：css:层叠样式：定义如何显示HTNL元素当浏览器读到一个样式表，就会按照样式表来对文档进行格式化（渲染）css语法结构：选择器和声明：声明包括{属性1：属性... 查看详情

19、css样式的优先级

参考技术A1、最近的祖先样式比其他祖先样式优先级高。2、"直接样式"比"祖先样式"优先级高。首先，我们需要知道有哪些选择器：1）ID选择器，如#id2）类选择器，如.class3）属性选择器，如a[href="segmentfault.com&q... 查看详情

html/css选择符优先级

CSS的选择符优先级1、同级样式默认后者覆盖前者2、样式优先级类型(1)<class[type](10)=伪类(10)<id(100)<style行间样式(1000)<style内部样式<link外部引入样式选择符的相应值综合相加起来大的优先级高注:相应值仅仅是代表他们... 查看详情

css样式优先级及穿透

参考技术ACSS优先级是根据等级的值相加得出选择器的权重来决定的。!important>行内样式>ID>类、伪类、属性>标签名>继承>通配符计算权重方式：从图上看讲权重分为：1. 第一等：代表内联样式，如:style=””，权... 查看详情

css选择器和权重计算

CSS选择器类选择器ID选择器标签名选择器子选择器(ul>li)通配符选择器(*)属性选择器(a[name="input"])伪类选择器(li:nth-child)一个标签的样式渲染顺序:id>class/伪类>标签选择器的权重计算:假设:id选择器的权重为100class/伪类的权重... 查看详情

java开发过程中几种常用算法

排序算法排序算法中包括：简单排序、高级排序 简单排序 简单排序常用的有：冒泡排序、选择排序、插入排序冒泡排序代码如下：1privatestaticvoidbubbleSrot(int[]arr){23for(inti=0;i<arr.length-1;i++){45for(intj=i+1;j<arr.length;j++){67if(a... 查看详情

css权值问题

...通配符的的权值0还要低。选择器是不分上下级的。只管优先级。第一等：代表内联样式，如:style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。... 查看详情

css3中伪类选择器和伪元素介绍

...，css3也是必须要掌握的，下面和大家讨论一下css3中伪类选择器和伪元素。类选择器在css中可以使用类选择器把相同的元素定义成不同的样式。比如：p.left{text-align:left}p.rigth{text-align:right}伪类选择器类选择器和伪类选择器的区别... 查看详情

css选择器

...择器、子选择器和css3中新增的兄弟选择器。以下仅说明几种常用的选择器使用方法。1.ID选择器（IDselector，IS）。为标有特定id的HTML元素指定特定的样式。使用“#”表示selector，语法格式：#S{……} S是选择器名称。例如：id为... 查看详情

css的属性选择器和伪类

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>/*[id=‘id1‘]{*//*background:#fac237;*//*}*//*区分标签下选择*//*p[clas 查看详情