html - css 中.class 元素和element.class 的区别？

Question

学习本教程 http://www.w3schools.com/css/tryit.asp?filename=trycss_nesting .对他们为什么使用 .marked p 而不是 p.marked 感到困惑(为什么当我将其更改为 p.marked 时文本不会变白)。

我浏览了以前的帖子，例如 what is the difference between ".class element" and "element.class"?但无法理解答案，因为他们使用了我像 child 和后代一样不理解的术语。

有人可以提供一个简单的例子来说明这些是如何工作的。谢谢。

Answer 1

其实很简单。

接受这段 HTML 代码

<div class="container">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

第一种是element.class

示例:

div.container{
 background:red;/*This will set the background to the div WITH class "CONTAINER"*/
}

第二种是.class元素

示例:

.container div{
   background:blue;/*This will set the background to the div INSIDE the CONTAINER class*/
}