美文网首页js css html
选择器的优先级

选择器的优先级

作者: Cissy_fba3 | 来源:发表于2023-02-10 21:12 被阅读0次

选择器可以分为 0-5 6个等级,前四个等级由css选择器决定,后两个等级由书写形式合特定语法决定。
每个等级都有自己的分数,优先级就是各个等级的选择器加起来分数大的高。如果分数一样,则后写的优先级高。

0级

通配选择器、选择符和逻辑组合伪类。

通配选择器:*;

选择符:+、>、~、空格、||

逻辑组合伪类::not() :is() :where 等 (这些伪类本身并不影响css优先级,影响优先级的是括号里面的选择器)

分数:0

一级

标签选择器和伪元素选择器

分数:1

div {
  color: red;
}
::selection {
  color: red;
}

二级

类选择器,属性选择器,伪类

分数:10

.my-class {
  color: red;
}
:hover {
  color: red;
}
[href='#'] {
  color: red;
}

三级

ID选择器

分数:100

#myID {
  color: red;
}

四级

style属性内联

分数:1000

<div style="color: red"></div>

五级

! important

分数:10000

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

注意:尽量不要使用id选择器,原因:优先级太高;会和js耦合,容易产生bug。也尽量不要使用内联样式和important,优先级太高,后面改的时候不好改。

一些例子:

/*11 :not()虽然为0,但是里面的class要算分*/
div:not(.my-class) {
  color: red;
}

<a class="my-class another-class" href="#">A link</a>

<style>
/*1*/
a {
  color: red;
}

/*11*/
a.my-class {
  color: green;
}

/*21*/  
a.my-class.another-class {
  color: rebeccapurple;
}

/*31*/
a.my-class.another-class[href] {
  color: goldenrod;
}

/*41*/
a.my-class.another-class[href]:hover {
  color: lightgrey;
}
</style>

一般的选择器简易记法

image
a.my-class.another-class[href]:hover {
  color: lightgrey;
}
/*0个id选择器,4个二级选择器[类/属性/伪类],1个一级选择器[标签/伪元素]*/
/*所以分数为041 —— 41*/

相关文章

  • 今日所学知识点

    选择器的优先级 1.权重内联样式 优先级1000id选择器 优先级100类选择器 优先级10元素选择器 优先级1通...

  • 2019-05-28 选择器优先级,a的伪类,文本标签,列表,单

    选择器的优先级 优先级的规则 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器...

  • CSS样式学习2

    !important 声明最高 标签选择器优先级:id选择器优先级>class优先级>标签选择器 1.权值相同 同...

  • 2019-05-28

    选择器的优先级 优先级的规则:1.内联样式:优先级1000 2.id选择器:优先级100 ...

  • CSS布局基础(五)--选择器

    选择器的优先级:直接在标签中的设置样式> ID选择器 > 类选择器 > 标签选择器指定ID选择器优先级>ID选择器...

  • 2018.9.7HTML笔记

    样式的优先级 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器,优先级1...

  • 选择器的优先级

    优先级的规则: 内联样式,优先级1000 id选择器,优先级100 类和伪类,优先级10 元素选择器,优先级1 通...

  • CCS选择器及优先级

    CSS选择器 选择器的优先级

  • 七、选择器样式优先级和常用CSS3

    1、通配符选择器 2优先级排序: 优先级相同的选择器后写的样式会覆盖前面的 3、后代选择器优先级多种情况 ID选择...

  • CSS中选择器的优先级

    一, 选择器的优先级 总结1, 选择器的优先级 : pimportant >内联 > id > 类 > 标签 | ...

网友评论

    本文标题:选择器的优先级

    本文链接:https://www.haomeiwen.com/subject/oztphdtx.html