css中.class元素和element.class之间的区别？答案

【问题标题】：difference between .class element and element.class in css?css中.class元素和element.class之间的区别？
【发布时间】：2016-04-24 12:56:39
【问题描述】：

按照本教程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"?，但无法理解答案，因为他们使用了我不理解的术语，例如儿童和后代。

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

【问题讨论】：

快速示例：jsfiddle.net/7UX8c/1
答案很明确，为什么会迷茫？将文档视为树或层次结构，有祖先和后代。 a b选择器，选择a的b子元素，a.b选择有b类的a元素。跨度>

标签： html css

【解决方案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*/
}

【讨论】：

【解决方案2】：

请阅读 CSS 选择器的一些基本规则，如下所示：

.foo --> selects all element which have class foo
#foo --> selects an element which its id is foo
p.foo --> selects all P elements which have class foo
p#foo --> selects a P element which its id is foo
.foo p --> selects all P elements which are resident inside all elements which their class is foo
and so on...

【讨论】：

【解决方案3】：

element.class 将属性应用于元素本身，而.class element 将属性应用于类内的元素。

简单来说，如果你有element.class，然后你说<element class="class" />，那么你制作的css就会被应用到那个元素上。另一方面，如果你有.class element 然后你就这样做了

<element class="class">
<element />
</element>

然后你的 css 将应用于里面的元素。

【讨论】：

【解决方案4】：

问题是 .class 将属性分配给所有元素，而不管它们的类型，即它可以应用于 div、span、p 等

但 element.class 属性仅应用于该元素

【讨论】：

【解决方案5】：

当您编写.class elementname 时，这意味着您在.class 标记中定位元素名称。假设你有“.test p”，你会写， <div class="test">Happened<p>Something</p></div>

当您编写元素 .class 时，您正试图将目标定位在元素标签内的 .class 元素上。假设你有“p .test”，你会写， <p>Something, <div class="test">Happened</div></p>

【讨论】：