Question

对不起，如果标题不好，不知道该说什么...

好吧，我的问题很简单，但由于不了解它的工作原理而使我感到困惑。

我正在使用引导程序3，这是HTML部分：

<div id="Shop_Row" class="row" >

     <!--  Shop Item Start-->
       <div id="Shop_Item_01" class="col-sm-6 col-md-4">
                <div class="thumbnail" >
                    <h4 class="text-center"><span class="label label-info">Nokia</span></h4>
                    <img src="http://placehold.it/650x450&text=Lumia 1520" class="img-responsive">
                    <div class="caption">
                        <div class="row">
                            <div class="col-md-6 col-xs-6">
                                <h3>Lumia 1520</h3>
                            </div>
                            <div class="col-md-6 col-xs-6 price">
                                <h3>
                                <label>$749.00</label></h3>
                            </div>
                        </div>
                        <p>32GB, 4GB Ram, 1080HD, 6.3 inches, WP 8</p>
                        <div class="row">
                            <div class="col-md-6">
                                <a class="btn btn-primary btn-product"><span class="glyphicon glyphicon-thumbs-up"></span> Like</a> 
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div>
                        </div>

                        <p> </p>
                    </div>
                </div>
            </div>
     <!--  Shop Item End-->

</div>

好吧，现在我要按从右到左的顺序排列。

这是第一种方法： 我将一个'shopitem'类添加到Shop_Item_01。

.shopitem{
   float:right;
}

它工作正常。

第二种方法：：我向Shop_Row添加了一个“商店清单” 类。

.shoplist div{
    float:right;
}

现在它可以工作，但是会影响Shop_Item_01的所有成员。

为什么会这样？有第二种方法可以避免这种情况吗？

Answer 1

如果您使用后代选择器（空格），CSS会自动为所有后代添加样式：

.shoplist div {
    float:right;
}

为防止这种情况，您可以使用子选择器>：

.shoplist > div {
    float:right;
}

Answer 2

代码：

.shoplist div{ float:right; }

表示它会影响其下的所有div元素，而不仅仅是.shoplist 阅读this了解更多信息。

By the way, bootstrap 3 provide a class for floating.

Answer 3

没有办法避免这种情况，因为CSS是这样工作的，这是该语言的基本设计。您越能明确指定要定位和影响的元素，其作用范围就越窄。

在下面的示例中，我们只想将样式应用于.child类。 CSS正是我们所说的。而没有该类的包装元素<p>并不是目标。

但是在示例2中，我们现在选择更广泛的.parent-2 p，所有<p>都将成为目标。

如果您想避免这种情况的发生，我会说只针对您要更改的项目。具有适当的类结构。

.child {
  color: red;
  font-weight: bold;
}

.parent-2 p {
  color: green;
  font-weight: bold;
}



/* additional styling */

p {
  font-family: arial;
}

.deeper-layer {
  outline: 1px solid grey;
  padding: 10px;
}

<!-- scenario 1 -->
<div class="parent">
    <h1>Title 1</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <div class="deeper-layer">
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

</div>

<hr>

<!-- scenario 2 -->
<div class="parent-2">
  <h1>Title 2</h1>
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  <div class="deeper-layer">
    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

    <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellentesque, leo id</p>

</div>

为什么“ float：right”在这两种方法中的行为有所不同？

3 个答案: