1

你能解释一下这种css声明吗：

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

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

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

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

请给我一些解释！

4

9 回答 9

2

两个点表示两个类——那些特定的 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>
于 2013-03-20T22:59:38.790 回答
1

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

<div class="menu_blueSkin_Middle dir_left">
    <div class="align_left"></div>
</div>
于 2013-03-20T22:59:47.737 回答
1

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

于 2013-03-20T23:02:46.397 回答
1

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

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

<div class="menu_blueSkin_Middle dir_left">
  <div class="align_left"></div>
</div>
于 2013-03-20T23:04:22.073 回答
1

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

这是一个示例

<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>
于 2013-03-20T23:05:42.093 回答
1 
.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;
}

好的，以下适用：

  • .thirdclass 是唯一受到影响的 [with float:left; 代码]。
  • 只有 div 中的 .thirdclass 类会受到影响。（由于 div 位于它之前）
  • 只有位于同时声明 .secondclass 和 .firstclass 的类中的 .thirdclass div 会受到影响。

示例代码：

<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>
于 2013-03-20T23:55:18.200 回答
0 
.menu_blueSkin_Middle.dir_left div.align_left

方法

具有类 menu_blueSkin_Middle 和类 dir_left 的任何元素，其子元素是具有类 align_left 的 div 标签

于 2013-03-20T23:01:27.207 回答
0

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

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

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

于 2013-03-20T23:06:43.927 回答
0

关于什么的很多答案，但为什么呢？

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

有时您希望具有更多的特异性（将其读取为更高的优先级并添加两个类（类之间没有空格）-在这里您确实有多个，这增加了应用此 CSS 的可能性。所以具有这些多个的元素类获得特异性。

尝试在“css 选择器多个类”上搜索 google/bing

于 2013-03-20T23:09:51.980 回答