2012-10-10 69 views
22

有人可以解释这两个CSS选择器的区别吗?点在CSS中的含义是什么?

.work-container . h3 { 
font-size: 14px; 
margin-top: 0px; 
font-weight: 600; 
height: 27px; 
} 

上限定义中的额外点是多少?

.work-container h3 { 
font-size: 14px; 
margin-top: 0px; 
font-weight: 600; 
height: 27px; 
} 
+5

第一个例子是无效的CSS。可能是一个错字。 – steveax

+0

CSS给了我一堆奇怪的属性,我不是CSS专家。 –

回答

29

一个.前缀通常代表一类选择,但如果它紧跟空格那么它是一个语法错误。

如果我想冒险猜测,那么很可能是笔者想要说的.work-container > h3,但错过了Shift键,就像他正要输入>字符(child combinator)一样。

您的第二个选择器.work-container h3仅表示包含在名为work-container的类的元素中的任何h3

+2

要快速检查样式表是否有语法错误,http://jigsaw.w3.org/css-validator/非常方便。错误处理规则在规范中定义在http://www.w3.org/TR/CSS21/syndata.html#parsing-errors,在这种情况下,它们暗示整个规则被忽略(但是样式的其他部分表不受影响)。 –

+0

@BoltClock,在CSS中,我认为你也可以在div.ui-datepicker之类的东西之间加点。你将如何解释它? – Jogi

6

.说,它的类

#意味着它的一个ID

,如果有什么,但选择,那么它是一个标签

10

在CSS .意味着它是一个类,它可以应用于许多元素。

#在CSS中表示它是一个ID,它可以应用于每页一个元素。

没有这两者,它是一个标签,针对所有用途。

在你的语法中,.work-container . h3实际上是错误的。 .应该是,BoltClock表示,>,它表示CSS中的直接后代运算符。

4

在CSS .意味着它是一个类&它可以应用到许多元件与类

之间。例如利用空间:

<h3 class="class1 class2 class2">Heading</h3> 

在CSS #意味着它是一个ID,它可以应用于每页一个元素。

例如

<h3 id="idname1">Heading</h3> 
20

  • 选择开始点

    .class_name表示类名

  • 两个钟爱选择由空格隔开

    .outside.inside

    意味着.inside类元素从元素后裔与类.outside

  • 没有分离两个钟爱选择

    .name1.name2

    是指具有两个类元素name1name2 例如:class="name1 name2"

stackoverflow Link1

stackoverflow Link2

相关问题