Question

请你解释一下这种css声明：

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

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

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

但带来问题的例子有两个点。一个在开始，一个在中间。然后是空格和另一个声明div.align_left？

请给我一些解释！

Answer 1

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

这两个类都需要出现在你的外部div上：

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

Answer 2

这意味着该元素必须具有两个匹配规则的类。

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

Answer 3

div.align_left是后代选择器。这意味着只应用（select）div.align_left中嵌套在menu_blueskin_Middle.dor_left元素中的DOM元素。

Answer 4

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

选择器例如匹配此代码中的内部div：

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

Answer 5

它将包含的规则应用于同时分配了两个类的元素。

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>

Answer 6

.menu_blueSkin_Middle.dir_left div.align_left

这里有三个课程。

这有点复杂，因为无论谁命名这些课程都是业余爱好者。你永远不应该命名与css代码相同的类。

为了便于理解，让我们重命名显示的三个类：

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

好的，现在使用三个重命名的类，让我们显示代码：

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

好的，以下情况适用：

。第三类是受影响的唯一一个[浮动：左; 码]。
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>

Answer 7

.menu_blueSkin_Middle.dir_left div.align_left

装置

具有类menu_blueSkin_Middle AND class dir_left的任何元素，其子元素是具有类align_left的div标记

Answer 8

这称为双类选择器。它将应用于具有两个类的元素，如下面的

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

您可以加入任意数量的ID和类选择器，例如.class1＃identifier.class2.class3等。

Answer 9

关于什么，但为什么会有很多答案？

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

有时你想要有更多的特异性（读取它作为一个更高的优先级，并添加两个类做到这一点（类之间没有空格） - 在这里你真的有多个增加了这个CSS应用的可能性。那么那个元素这些多个类别具有特异性。

尝试搜索google / bing on＆＃34; css选择器多个类＆＃34;

这个css声明意味着什么 - 一次两个声明

9 个答案: