我试图自我验证scss（css）的属性应用的优先级_css教程_前端技术

你好，我的名字是aono1234。如果你觉得这篇文章不错，我们在推特上等你关注我们！
https://twitter.com/takeshi_program

谢谢你的辛劳工作
今天是scss(css)的属性优先级验证文章。 ?
不好的一句话，喜欢的请看一下❗❗

0. 写文章的机会

scss 在文件中实现样式时，根据代码写的地方或选择器的不同，有很多时候代码没有体现出来。
我花了很多天在想，“即使花了很长时间，这是唯一可以实施的吗？”

不能否认我对scss还缺乏了解，[财产优先]我已经验证到我可以理解的程度，所以我会分享它。

1.首先

本文适用于以下读者：

新手编程

知道的人css

知道的人scss

2. 先总结
基本优先级是选择器的类型 > 选择器的特异性 > 代码写在哪里

1. 规则在某些情况下可能不适用
添加scss时，添加前先了解现有代码的结构

3. 什么是优先级？

html 如果结构是：
原始文件
<div class = "test1" id = "test1">
  <div class = "test2" id = "test2">
    <p  class = "message" id = "message">hello world</p>
  </div>
</div>
假设scss 是这样写的。
示例1
//スタイル1
.test2{
  .message{
    background-color: red;
  }
}

//スタイル2
.message{
  background-color: yellow;
}
スタイル1 和 スタイル2 都是更改 .message 类的背景颜色的代码。
现在，哪种风格适用？
我称之为“优先级”。

顺便说一句，此代码优先于スタイル1。

3. 优先级因素

据我所知，有三个因素决定了哪个属性具有更高的优先级。
选择器类型

选择器特异性
代码写在哪里

我将介绍他们每个人。

3.1 选择器类型

这个网站上有关于“1. Selector types”的通俗易懂的解释，请参考。
https://webst8.com/blog/css-selector-priority/

3.2 选择器特异性

由于scss 可以将属性分配给相同的.message，
示例1
//スタイル1
.test2{
  .message{
    background-color: red;
  }
}

//スタイル2
.message{
  background-color: yellow;
}
你可以这样写
スタイル1 是
``.test2.messageclass background-color 类中的属性red''?

スタイル2 是
“.message类background-color属性yellow”?‍♂️

这是说的代码。
应用スタイル1 的background-color 属性是因为此代码的优先级高于スタイル1?，它更详细地告诉我们.message 的位置。

3.3 代码写在哪里

这个案子怎么办？
示例2
//スタイル3
.message{
  background-color: red;
}
//スタイル4
.message{
  background-color: yellow;
}
两者都具有相同的选择器和相同的特异性。

基本上编程是从顶部按顺序读取的。
所以スタイル3和スタイル4在浏览器中都加载了，但是スタイル3是先加载后被スタイル4覆盖的。
因此在这种情况下，スタイル4 属性优先。
除非您指定与以下相同的属性，否则两者都会应用。
示例3
//スタイル5
.message{
  background-color: red;
}

//スタイル6
.message{
  // background-color: yellow;
  font-weight: 900;
}
4.当多个因素重叠时

当上述三个因素中的每一个重叠时会发生什么？
例如：
例子4
//スタイル7
//コードが記載される箇所（優先度：低）
//セレクタの詳細度（優先度：高）
//セレクタの種類（優先度：低）
.test2{
  .message{
    background-color: red;
  }
}

//スタイル8
//コードが記載される箇所（優先度：高）
//セレクタの詳細度（優先度：低）
//セレクタの種類（優先度：高）
#message{
  background-color: yellow;
}
在这种情况下，如果不知道“选择器类型”、“选择器特异性”、“代码写在哪里”等因素的优先级，就无法给出答案...?
所以让我们来看看吧！

5. 验证

验证细节：确认哪些因素具有最高优先级。
验证结果整理在下表中。

选择器类型选择器特异性代码写在哪里

选择器类型 -

选择器特异性 -

代码写在哪里 -

5.1 【验证一】Selector type x selector detail

验证码
验证 1
//スタイル9
//セレクタの種類（優先度：低）
//セレクタの詳細度（優先度：高）
.test1{
  .test2{
    .message{
      background-color: red;
    }
  }
}

//スタイル10
//セレクタの種類（優先度：高）
//セレクタの詳細度（優先度：低）
#message{
  background-color: yellow;
}
结果

结果：“选择器类型”的优先级高于“选择器特异性”

选择器类型选择器特异性代码写在哪里

选择器类型 - ⭕

选择器特异性 ✖ -

代码写在哪里 -

5.2 【验证2】选择器类型x写代码的位置

验证码
验证 2
//スタイル11
//セレクタの種類（優先度：高）
//コードが記載される箇所（優先度：低）
#message{
  background-color: blue;
}

//スタイル12
//セレクタの種類（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: green;
}
结果

结果：“选择器类型”的优先级高于“编写代码的位置”

选择器类型选择器特异性代码写在哪里

选择器类型 - ⭕ ⭕

选择器特异性 ✖ -

代码写在哪里 ✖ -

5.3 【验证3】选择器x位置的特殊性写代码

验证码
验证 3
//スタイル12
//セレクタの詳細度（優先度：高）
//コードが記載される箇所（優先度：低）
.test2{
  .message{
    background-color: pink;
  }
}

//スタイル13
//セレクタの詳細度（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: purple;
}
结果

结果：“选择器的特定性”比“编写代码的地方”具有更高的优先级

选择器类型选择器特异性代码写在哪里

选择器类型 - ⭕ ⭕

选择器特异性 ✖ - ⭕

代码写在哪里 ✖ ✖ -

结论：因素之间的优先级是“选择器类型 > 选择器特异性 > 代码编写位置"

6. 对优先级仍然缺乏了解?

您认为以下哪个代码优先？
示例5
//スタイル14
//セレクタの種類（優先度：低）
//セレクタの詳細度（優先度：高）
//コードが記載される箇所（優先度：低）
.test2{
  p{
    background-color: purple;
  }
}

//スタイル15
//セレクタの種類（優先度：高）
//セレクタの詳細度（優先度：低）
//コードが記載される箇所（優先度：高）
.message{
  background-color: pink;
}
答案是…

スタイル14 有优先权！
这仍然让我消化不良。

父元素的选择器类型会影响优先级吗？ ?
知道的请告诉我?

7.我还是看不懂scss，但是为了避免“属性未应用?”

我希望我能完全理解scss，但这是我分析能力的极限。那么如何防止“scss 未应用”错误呢？

当我添加代码时【加入现有的scss代码结构，不麻烦❗❗】我建议?（这正常吗？?）

添加代码的时候，我在底部写了附加代码，因为阅读现有代码很麻烦。
//既存のコード
.test1{
  p{
    background-color: purple;
  }
}

//追加したコード
.message{
  background-color: pink;
}
如果你这样写，你会陷入优先级的沼泽......
我今天将停止这样做！！
从明天开始，我会尝试在现有代码的结构中正确地编写它，而不是对其进行改造！
//既存のコード
.test1{
  p{
    background-color: purple;
  }
  //追加したコード
  .message{
    background-color: pink;
  }
}
这使它具有可读性，并且不会混淆不同父元素的优先级！（因为我们共享了父元素，所以我们只能根据基本规则来理解优先级。?）

6. 最后

scss 不是专业语言，所以很简单（笑）。
我想。 ?
随着我深入挖掘，还有很多我不明白的东西。
从现在开始scss“适当地”我想认识你！

如果你发现任何关于scss的信息，我想写一篇关于它的文章，所以请多多关照！ ?