2013-03-20 147 views
1

能否请您解释一下我这种CSS声明:这是什么CSS声明的意思是 - 两个声明一次

.menu_blueSkin_Middle.dir_left div.align_left { 
float: left; 
} 

据我所知,如果你有.someName {}这意味着这放在html元素类属性中。例如:

<div class='someName'></div>. 

但带来问题的例子有两个点。开始时一个,中间一个。那么有空间和另一个声明div.align_left?

请给我一些解释!

+1

10X。我想知道如何搜索它。 – 2013-03-20 23:03:59

回答

1
.menu_blueSkin_Middle.dir_left div.align_left 

有三类这里所说的。

这有点复杂,因为谁命名这些类是一个业余爱好者。你不应该命名与CSS代码相同的类。

为了便于理解,让我们重命名显示三类:

  • menu_blueSkin_Middle,我们将重命名为.firstclass
  • dir_left,我们将重命名为.secondclass
  • .align_left,我们将重命名为.thirdclass

OK,现在有三个改名类,让你展示的代码:

.firstclass.secondclass div.thirdclass { 
    float: left; 
} 

好了,所以出现以下情况:

  • .thirdc lass是唯一受到影响的人[浮动:左; code]。
  • 只有div中的.thirdclass类会受到影响。 (由于div位于它之前)
  • 只有.thirdclass div位于一个类中,并且.secondclass和.firstclass的双声明都会受到影响。

示例代码:

<div class="firstclass secondclass"> 
    <p class="thirdclass"> 
    </p> 
     <!-- NOTE: THIS IS JUST A NOTE SO YOU KNOW WHICH IS AFFECTED. 
      The DIV below is the **only one affected**. The P above is NOT affected. Because it is not a DIV. 
      The DIV at the bottom is NOT affected. Because it is not nested inside the firstclass secondclass 
     --> 
    <div class="thirdclass"> 
    </div> 
</div> 
<div class="thirdclass"> 
</div> 
2

两个点表示两个类 - 这些特定的CSS规则只有在一个元素同时具有这两个类时才会生效。

这两个类都需要存在于你的外格:

.menu_blueSkin_Middle .dir_left 

当你在里面的div类应该包含该类一个div(可以有多个,但至少应以下):

.align_left 

因此它应该是这个样子:

<div class="menu_blueSkin_Middle dir_left"> <!-- Outer div class selectors --> 
    <div class="align_left"></div> <!-- Inner div class selector --> 
</div> 
1

据我ans元素必须有两个类匹配规则。

<div class="menu_blueSkin_Middle dir_left"> 
    <div class="align_left"></div> 
</div> 
0
.menu_blueSkin_Middle.dir_left div.align_left 

意味着

与类menu_blueSkin_Middle和类dir_left任何元素,有一个子元素是具有类ALIGN_LEFT

1

的div.align_left是div标签后裔选择器。这意味着只应用(选择)嵌套在menu_blueskin_Middle.dor_left元素中的div.align_left的DOM元素。

1

您可以在元素的class属性中拥有多个类名称,并且具有两个类名称的选择器放在一起意味着该元素需要同时具有两个类名称以匹配选择器。

选择器将例如匹配在此代码内div

<div class="menu_blueSkin_Middle dir_left"> 
    <div class="align_left"></div> 
</div> 
1

它应用包含规则,其具有分配两个类元素。

Here's a sample

<html> 
    <style> 
    .one { color: green; } 
    .two { color:red; } 
    .one.two { color:blue; } 
    </style> 
    <div class="one">I'll be Green</div> 
    <div class="two">I'll be Red</div> 
    <div class="one two">I'll be Blue</div> 
</html> 
0

这就是所谓的双类选择。它将被应用到的元素具有两个类,像一个下面

<div class="menu_blueSkin_Middle dir_left">...</div> 

您可以加入任意数量的ID和类选择等.class1#identifier.class2.class3等等。

0

很多的答案是什么,但为什么?

.menu_blueSkin_Middle.dir_left div.align_left { 
float: left; 
} 

有时你想有更多的特异性(读取为更高的优先级,并增加了两个班确实类之间的(无空格) - 在这里你真的有多种这增加了可能性,这CSS将被应用。让那些有多个类涨幅特异性的元素。

尝试在搜索谷歌/冰“CSS选择多个类”