CSS中彼此相邻的两个类

Question

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navigation_desktop">

    <div class="button">1.0 Main Menu
        <div class="FadeItem">
            <ul>
                <li>1.1 Sub Menu </li>
                <li class="button">1.2 Sub Menu
                    <div class="FadeItem">
                        <ul>
                            <li>1.2.1 Sub Menu</li>
                            <li>1.2.2 Sub Menu</li>
                        </ul> 
                    </div>
                </li> 
            </ul>
        </div>
    </div>
</div>

CSS:

 .button {
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

.FadeItem {
display: none
}

.FadeItem .FadeItem {
position: absolute;
left: 100%;
top: 0;
width: 130px;
height: 100%;
}

jQuery的:

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".FadeItem").fadeIn(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".FadeItem").fadeOut(500);
  });
});

使用上面的代码,一旦我将鼠标悬停在按钮上,我就会让FadeIn/Out出现一些项目.代码完美无缺,但我对上面示例中的CSS编码有一般性的疑问.

在CSS中有这一部分:

.FadeItem .FadeItem {
}

你什么时候创建这样的CSS代码？它会触发什么？

我是CSS编程的新手,到目前为止我只使用了一个或两个用逗号分隔的类.我想提高我的编码知识,如果你能给我一个关于上面代码的解释,那将会很酷.

你也可以在这里找到代码:https://jsfiddle.net/gge42bob/3/

Answer 1

它针对的是.FadeItem另一个.FadeItem,所以在这种情况下它很有用,因为样式只适用于内部.FadeItem元素,而不适用于外部元素.

你的标记类似于

<div class="FadeItem">
    <div class="FadeItem"></div>
</div>

所以只有

.FadeItem {styles}

会针对他们两个,但是

.FadeItem .FadeItem {styles}

目标只有一个那就是其他内