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

有人可以提供一个关于这些工作方式的简单示例。谢谢。

Answer 1

请阅读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...

Answer 2

非常简单。

获取此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*/ }

Answer 3

element.class将该属性应用于元素本身，而.class element则对类中的元素执行此操作。

简单来说，如果你有element.class并且你说<element class="class" />那么，你所做的css将被应用于那个元素。另一方面，如果你有.class element然后你做

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

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

Answer 4

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

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

Answer 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>

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

5 个答案: