CSS选择器优先级计算你真的会吗？

CSS权重计算

选择器优先级

基本选择器优先级（简单情况）

!important>行内（内嵌样式）>id选择器>类选择器>元素选择器>通配符选择器
复合选择器优先级（复杂情况）

一、检查选择器应用方式
- 检查是否有**!important*提高选择器优先级,有则该选择器优先级最高
- 检查选择器的应用的样式表,依据:内联>内嵌=外联 的优先级排序选择器
- 若处于同一样式表,则用三元组法计算权重
二、权重表示方式

设定以三元组（a, b, c）来表示选择器的权重，其中各元素含义如下：
- a ：对应 ID 选择器的数量，每发现一个此类选择器，a 的数值相应加 1。
- b ：对应 类选择器、伪类选择器、属性选择器的数量总和，每发现一个此类选择器，b 的数值相应加 1。
- c ：对应 元素（标签）选择器、伪元素选择器的数量总和，每发现一个此类选择器，c 的数值相应加 1。
三、优先级比较逻辑

对于需要判定优先级的两个复合选择器，分别记其权重为（a₁, b₁, c₁）和（a₂, b₂, c₂），按以下逻辑步骤比较优先级(相同样式表情况下)：
1. 比较 a 值：
- 若 a₁ > a₂，则权重优先级为（a₁, b₁, c₁）>（a₂, b₂, c₂）对应的选择器，比较终止，无需再考虑 b 值与 c 值情况。
- 若 a₁ < a₂，则权重优先级为（a₂, b₂, c₂）>（a₁, b₁, c₁）对应的选择器，比较终止，无需再考虑 b 值与 c 值情况。
- 若 a₁ = a₂，则进入下一步比较 b 值。
1. 比较 b 值（当 a 值相等时） ：
- 若 b₁ > b₂，则权重优先级为（a₁, b₁, c₁）>（a₂, b₂, c₂）对应的选择器，比较终止，无需再考虑 c 值情况。
- 若 b₁ < b₂，则权重优先级为（a₂, b₂, c₂）>（a₁, b₁, c₁）对应的选择器，比较终止，无需再考虑 c 值情况。
- 若 b₁ = b₂，则进入下一步比较 c 值。
1. 比较 c 值（当 a 值与 b 值均相等时） ：
- 若 c₁ > c₂，则权重优先级为（a₁, b₁, c₁）>（a₂, b₂, c₂）对应的选择器。
- 若 c₁ < c₂，则权重优先级为（a₂, b₂, c₂）>（a₁, b₁, c₁）对应的选择器。
- 若 c₁ = c₂，则表明两个选择器优先级相同
1. 当a,b,c,值均相等时
- 比较选择器处于代码中的顺序,依据CSS的层叠规则,后来者居上的优先级更高

CSS选择器的简单理解

在网页开发过程中，浏览器本身并不知道如何呈现网页中各种元素的样式，这就需要人为地去指定。而实现这一目的的关键工具就是 CSS 选择器。CSS 选择器的作用类似于给网页元素贴上特定的 "标识" 。通过这些 "标识"，我们可以准确地告知浏览器哪些元素需要应用特定的样式。

具体来说，不同类型的 CSS 选择器能够精准地定位到我们想要修改样式的元素，无论是通过元素本身的标签名、自定义的类名，还是唯一的 ID 标识等方式，CSS 选择器都能够帮助我们在众多网页元素中找到目标元素，并对其样式进行设置。

css选择器的分类

CSS 选择器分为基本选择器 与复合选择器 两类。基本选择器是学习css选择器的必备内容，可实现基本元素选择，但在复杂项目里，因元素繁多、结构复杂，仅用基本选择器选取元素会非常繁琐。而复合选择器作为基本选择器的升级版，能更高效便捷地定位元素，极大提升在复杂项目中的元素选中效率，以适应复杂项目开发需求。 (菜鸟教程)

基本选择器

元素选择器（标签选择器）
类选择器
id选择器
通配符选择器

复合选择器

交集选择器
并集选择器
兄弟选择器
属性选择器
后代选择器
伪类选择器
伪元素选择器

基本选择器的使用

元素选择器（标签选择器）

功能其功能能够一次性对页面中所有指定类型的标签内容样式进行修改。在上述示例中，由于使用了p标签选择器并设置color: red的样式，所以页面中所有的<p>标签内的文字颜色都被修改为了红色。这使得在样式设计过程中，当多个相同标签需要统一的样式设置时，可以方便快捷地通过标签选择器来实现。
基本格式

xml 复制代码

<head>
 <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
   <P>标签选择器01</P>
  <P>标签选择器02</P>
  <h1>标签选择器03</h1>
</body>

类选择器

功能编码者能够依据设计需求与元素的功能、样式特点等，为特定元素赋予自定义的类名 ，从而将这些元素划分到相应的类别中。之后，在 CSS 样式表中，借助类选择器（其语法形式为以. 开头，后跟自定义的类名），可以精准地选中页面内所有被标记为同一类名的元素。一旦选中，就能够方便地对这些同类元素统一进行各种样式属性的修改与设定
基本格式

xml 复制代码

<head>
<style>
       .xx{
           color: red;
       }
   </style>
</head>
<body>
 <P class="xx">类选择器01</P>
 <P>类选择器02</P>
 <h1 class="xx">类选择器03</h1>

</body>

id选择器

功能 ID 选择器的主要作用是为页面中某一个特定且唯一 的元素指定独一无二的 ID 名称 。在 HTML 文档中，通过元素的id属性赋予其 ID 值，之后，在 CSS 样式表中，就能够使用#加上该特定的 ID 名称的 ID 选择器精准地选中与之对应的这个唯一的元素，从而可以对其单独设置样式，使其在页面中呈现出独特的样式效果，与其他元素区分开来。
基本格式:

xml 复制代码

<head>
 <style>
       #xx{
           color: red;
       }
   </style>
</head>
<body>
 <P id="xx">id选择器01</P>
 <P>id选择器02</P>
 <h1>id选择器03</h1>

</body>

通配符选择器

功能通配符选择器的功能在于它能够选中页面内的所有元素 ，无论元素是什么类型、具有何种属性或者处于何种层级结构中，都能被其涵盖。这使得在一些需要对整个页面的元素进行全局性样式重置或者统一基础样式设置的情况下非常有用，比如去除所有元素默认的浏览器样式等，以此来构建一个样式基础相对统一的页面样式起点，方便后续进一步针对具体元素进行个性化的样式添加和调整。
基本格式

xml 复制代码

<head>
   <style>
       * {
           margin: 0;
           padding: 0;
           color:red;
       }
   </style>
</head>
<body>
   <p>段落内容</p>
   <h1>标题内容</h1>
   <div>这是一个 div 元素</div>
   <a href="#">链接元素</a>
   <!-- 页面中无论还有其他什么元素，都会应用上面通配符选择器设置的样式 -->
</body>

复合选择器的使用

交集选择器（并列选择器）

功能交集选择器主要用于精确筛选页面中的元素。其具体的筛选规则是，仅选中那些同时符合两个或更多特定条件的元素，这些条件可以是相同的标签名与类名的组合，或者是相同的标签名与 ID 名的组合等。
基本格式

xml 复制代码

<style>
 <head>
    <style>
        p.beauty{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
   <h1 class="rich">土豪张三</h1>
   <h2 class="beauty">明星李四</h2>
   <p class="rich">小狗旺财</p>
   <p class="beauty">小猪佩奇</p>
</body>

并集选择器

功能并集选择器用于在页面中选取多个不同组别的元素，这些元素只需满足其中一个特定条件即可被选中 。其特定条件可以是相同的标签名、类名或者 ID 名等。例如，若使用并集选择器 h1, p.aaa, #xx，那么页面中的所有 <h1> 标签、具有 aaa 类名的 <p> 标签以及具有 xx ID 名的元素都会被选中。
基本格式

xml 复制代码

  <head>
    <style>
        h1,#xx,.aaa{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
   <h1>这个是个h1标签</h1>
   <h2>这个是个h2标签</h2>
   <h3 id="xx">这个是个h3标签</h3>
   <h4 class="aaa">这个是个h4标签</h4>
   <P>这是个p标签</P>
   <p class="aaa">这是个p（aaa）标签</p>

</body>

兄弟选择器

功能兄弟选择器主要用于依据元素间的兄弟关系来选取特定元素。分为相邻兄弟选择器和通用兄弟选择器。
- 相邻兄弟选择器 ，能够选中紧跟在指定元素之后的同层级且为特定类型的第一个元素 。例如，h1 + p 会选中紧挨着 <h1> 标签之后的第一个 <p> 标签。
- 通用兄弟选择器 ，则可以选中指定元素之后同层级的所有特定类型 的元素。比如，h1 ~ p 会选中 <h1> 标签之后的所有同层级的 <p> 标签。这两种兄弟选择器在对具有兄弟关系的元素进行样式设置和布局调整时，能够提供精准且灵活的元素选取方式，以满足多样化的页面设计需求。
基本格式 相邻兄弟选择器

css 复制代码

 <head>
    <style>
      h1 +div{
            color: red;
        }
    </style>
</head>
<body>

  <h1>h1标题元素</h1>
 <div>div元素1</div>
 <p>p段落元素1</p>
 <p>p段落元素2</p>
 <p>p段落元素3</p>
 <div>div元素2</div>

</body>

通用兄弟选择器

css 复制代码

html
    <head>
    <style>
      h1 ~ span{
            color: red;
        }
    </style>
</head>
<body>

 <h1>h1标题元素</h1>
 <div>div元素1</div>
 <p>p段落元素1</p>
 <p>p段落元素2</p>
 <p>p段落元素3
  <span>
      我是p元素的子span元素
  <span/>
 </p>
 <span>div元素2</span>
</body>

属性选择器

功能

属性选择器能够依据元素所具有的特定属性或者特定的属性值来精准地选取元素。它为开发者在 CSS 样式设置过程中提供了一种灵活且强大的手段，通过指定元素的某个属性名或属性值作为筛选条件，从而有针对性地对符合条件的元素应用样式，以实现多样化的页面设计效果与布局需求
存在属性选择器：

用于选择具有指定属性的所有元素，而不管该属性的值是什么。例如，[class]会选中所有带有class属性的元素，这在需要对具有某类属性的元素统一设置样式时非常有用，如[class] { color :red ; }会给所有有class属性的元素字体变为红色。
- 基本格式:

xml 复制代码

    <style>
       [class]{
            color: red;
        }
    </style>
</head>
<body>

    <h1>h1标题元素</h1>
    <h2 class="aa">h2标签元素</h2>
    <p class="bb"> p标签元素</p>

</body>
</html>

精确匹配属性值选择器 它会选择属性值完全等于指定值的元素。比如[class="aa"]会选中所有class属性值为aa的元素，然后可以对这些元素进行特定的样式设置，如[class="aa"]{color: red;}会将所有的class属性aa属性值的元素标红.
- 基本结构

xml 复制代码

    <style>
       [class="aa"]{
            color: red;
        }
    </style>
</head>
<body>
    <h1>h1标题元素</h1>
    <h2 class="aa">h2标签元素(aa)</h2>
    <p class="bb"> p标签元素(bb)</p>

</body>
</html>

部分匹配属性值选择器
- 以指定值开头匹配 ：选择属性值以指定值开头的元素。例如，a[href^="https"]会选中所有href属性值以https开头的a链接元素，可用于对不同协议开头的链接设置不同样式。
- 以指定值结尾匹配 ：选择属性值以指定值结尾的元素。如img[src$=".jpg"]会选中所有src属性值以.jpg结尾的图片元素，方便对特定格式的图片进行统一处理。
- 包含指定值匹配 : 选择属性值中包含指定值的元素。例如，p[class*="important"]会选中所有class属性值中包含important的段落元素，可针对包含特定关键词的类名进行样式调整。
属性值包含特定单词选择器 ：用于选择属性值包含以空格分隔的特定单词的元素。例如，p[class~="warning"]会选中class属性值包含warning单词的段落元素，即使class属性值还有其他单词，如class="alert warning"也会被选中。
属性值以连字符分隔包含特定单词选择器 ：当属性值是以连字符分隔的单词列表时，选择以指定值开头的元素。例如，img[alt|="product"]会选中alt属性值为product或以product-开头的图片元素，常用于处理具有特定命名规范的属性值。

关系选择器

关系选择器是 CSS 中用于根据元素之间的特定关系来选择元素的一类选择器，它可以更精准地对页面中的元素进行样式控制

关系选择器分为：子代选择器和后代选择器

子代选择器

功能

子代选择器用于选择某个元素的直接子元素。它通过 ">" 符号来连接父元素和子元素的选择器。
基本格式

css 复制代码

  <head>
    <style>
      p> span{
            color: red;
        }
    </style>
</head>
<body>
 <h1>h1标题元素</h1>
 <p>p段落元素1
  <span>
      我是p元素的子span元素
      <p>
      我是p元素的子span的子p元素
    </P>
  <span/>
 </p>
</body>

后代选择器

功能后代选择器用于选择某个元素的所有后代元素，包括子元素、孙元素、曾孙元素等，无论嵌套层次有多深。
基本结构：

css 复制代码

    <style>
      p span{
            color: red;
        }
    </style>
</head>
<body>

 <h1>h1标题元素</h1>
 <div>div元素1</div>
 <p> p段落元素1
  <span>
      我是p元素的子span元素
      <span>
      我是p元素的子span的子p元素
      <p>
        我是p元素的子span的子p元素的子p元素
      </span>
    </P>
  <span/>
 </p>
</body>

伪元素选择器

功能：

伪元素选择器在 CSS 中具有独特而重要的功能，它主要用于向页面中的元素添加一些特殊的效果或内容，而无需在 HTML 结构中直接添加额外的元素，以下是其具体功能：
- 添加装饰性内容
  
  ::before和::after ：这两个伪元素选择器可以在被选元素的内容之前或之后插入生成的内容。例如，可以使用::before在段落开头添加一个特殊的图标或装饰性符号，或者使用::after在链接文本后添加一个箭头图标，增强视觉效果和引导用户交互。这些生成的内容可以通过content属性进行定义，并且可以设置其样式，如颜色、大小、位置等，与被选元素的样式相互配合，实现丰富多样的页面装饰效果。
- 实现文本修饰效果
  
  ::first-letter：用于选择元素内文本的第一个字母，并对其进行特殊的样式设置。比如，可以将段落的第一个字母放大、改变颜色或设置为特殊字体，形成首字下沉或突出显示的效果，增加文本的视觉吸引力和可读性。
  
  ::first-line：它能够选择元素内文本的第一行，对其进行单独的样式设置。例如，将第一行文本设置为加粗、变色或添加下划线等，可用于突出显示重要信息或创建独特的文本排版效果，常用于文章标题、段落开头等位置。

伪类选择器

功能：伪类选择器是 CSS 中一种特殊的选择器，它的主要功能是根据元素的特定状态或位置等条件来选择和应用样式，而不需要在 HTML 文档中为这些状态或位置单独添加类名或 ID。以下是其具体功能：
- 链接相关状态选择 （一定要按如下顺序编写）:link可以为未点击过的链接设置样式，如颜色、下划线等；:visited则可对已访问过的链接进行样式修改，通常为了区分访问状态会将已访问链接的颜色设置得与未访问链接不同，这有助于用户识别哪些链接已经点击过。:hover用于当鼠标指针悬停在元素上方时改变元素的样式，如改变按钮的背景颜色、文本颜色或添加阴影效果等，能为用户提供即时的视觉反馈，增强交互性；:active是在元素被激活时应用样式，例如鼠标按下按钮时的样式变化；:focus则主要用于当元素获得焦点时的样式设置，如表单输入框获得焦点时改变边框颜色或显示提示信息等，方便用户明确当前操作的元素。
- 基本结构
xml 复制代码
```
 <head>
 <style>
a:link
{
   color: red;
}
a:visited
{
   color: green;
}
a:hover
{
   color: rgb(0, 0, 0);
}
a:active
{
   color: yellow;
}
</style>
</head>
<body>
<a href="<https://juejin.cn/>" target="_blank">这是一个测试链接

</a>

<span class="aa">
100
</span>

</body>
```

CSS选择器优先级权重计算

CSS层叠样式表

CSS有多种样式应用方法

优先级：内联>内嵌=外联

以下是一些常见的方式：

内联样式

语法：在 HTML 元素的style属性中直接定义 CSS 样式规则。例如：

css 复制代码

<p style="color: red; font-size: 16px;">这是一段红色、16px大小的文字</p>`

特点：
- 优先级高：内联样式的优先级高于内部样式表和外部样式表中的同名样式，因此可以直接对单个元素进行精确的样式控制，覆盖其他样式定义。
- 作用范围窄：仅作用于当前元素，不会影响其他元素的样式，具有很强的针对性和独立性。
- 维护性差 ：当需要对多个元素应用相同样式时，需要在每个元素的style属性中重复编写样式规则，代码冗余度高，不利于后期的修改和维护。

内嵌样式

语法：在 HTML 文档的<head>标签内使用<style>标签来定义 CSS 样式规则。例如：

xml 复制代码

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色、18px大小的文字</p>
</body>

特点：
- 局部作用域：样式规则仅适用于当前 HTML 文档，不会影响其他 HTML 文件，可针对特定页面进行样式定制。
- 方便修改 ：所有样式定义集中在<style>标签内，便于对当前页面的所有样式进行统一管理和修改，相较于内联样式，减少了代码的重复度。
- 不利于复用 ：如果多个 HTML 页面需要相同的样式，需要在每个页面的<style>标签中重复定义，无法实现样式的复用，增加了开发和维护的工作量。

外联样式

语法：将 CSS 样式代码写在一个独立的.css文件中，然后通过 HTML 文档中的<link>标签将该 CSS 文件引入到 HTML 页面中。例如，在styles.css文件中定义样式：

css 复制代码

p {
  color: green;
  font-size: 20px;
}

在 HTML 文件中引入：

xml 复制代码

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段绿色、20px大小的文字</p>
</body>

特点：
- 样式复用：可以在多个 HTML 页面中引入同一个外部样式表文件，实现样式的复用，提高了代码的可维护性和可复用性，当需要修改样式时，只需修改外部样式表文件，所有引用该文件的页面样式都会随之改变。
- 结构与样式分离：将样式代码从 HTML 文档中分离出来，使得 HTML 文件专注于页面结构的构建，CSS 文件专注于样式的设计，降低了代码的耦合度，提高了代码的可读性和可维护性，便于团队协作开发。
- 缓存机制：浏览器会对外部样式表文件进行缓存，当用户再次访问引用该样式表的页面时，浏览器可以直接从缓存中读取样式表，加快页面的加载速度，提高用户体验。