CSS3 选择器 p.para 与 p .para [重复]答案

【问题标题】：CSS3 selectors p.para vs. p .para [duplicate]CSS3 选择器 p.para 与 p .para [重复]
【发布时间】：2017-09-12 06:28:53
【问题描述】：

我阅读了以下内容，但我不完全理解这些选择器的含义。你能提供一个例子来说明它们之间的区别吗？谢谢。

【问题讨论】：

这是 CSS 中最基本的概念之一。如果您查找有关 CSS 选择器的任何指南或课程，您会发现这一点已得到解释。
那是 CSS 1 而不是 CSS 3。也是 HTML 4，而不是 5。
@Quentin：我想他认为 3 是技术名称的一部分，而不是版本号。就像大多数刚接触 Web 开发的人一样。
为什么投反对票！！！我的答案是正确的。
在任何基本 CSS 参考中都可以找到类选择器和后代选择器...正如 Quentin 正确指出的那样，您还可以在规范中找到所有选择器的概述。

标签： html css

【解决方案1】：

p.para { /* <p class="para">, similar to p[class="para"] */
   color:red;
}

p .para { /* any descendants, that have class="para", of <p> */
   color:blue;
}

<p class="para">
  P.Para {}
</p>

<p>
  <span class="para">
     P .Para {}
  </span>
</p>

【讨论】：

它是任何后代，而不仅仅是孩子。
"any <p> with child that has class="para" */" — 不。它选择后代，而不是段落本身。
@Quentin 你说得对，我丢失了术语，谢谢。
"<p> 的任何后代具有 class="para"" - 这是模棱两可的。它是“<p> 的任何具有 class="para" 的后代”
@Quentin 已更正。

【解决方案2】：

P{
  border: 1px solid black;
  width: 100px;
}
P.para {
  color: red;
  }
P .para {
  color: blue;
}

<p class="para"> <!--P tag with class para-->
  sth
</p>
    
<p> <!--P with child having class para-->
  <span class="para"> 
    sth
  </span>
  xyz <!-- xyz is element of p -->
</p> <!--Or any descendant not just children-->

“sth”都会随着任何 css 规则而改变，但“xyz”不会。

【讨论】：

它是任何后代，而不仅仅是孩子。
"P with child with class para" — 它选择后代，而不是段落本身。
感谢警告。
你的例子有点难以理解。谢谢。
@NoChance 好吧，我尽力了 :)