2013-03-20 140 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選擇多個類」