Извините, если заголовок плохой, не знаю, что сказать...
Хорошо. Мой вопрос прост, но сбил меня с толку, потому что я не понимаю, как это работает.
Я использую bootstrap 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>
Хорошо, теперь я хочу сделать список справа налево.
Вот первый подход:
Я добавляю класс 'шопитем' в Shop_Item_01
.
.shopitem{
float:right;
}
И это работает нормально.
Второй подход: Я добавляю класс 'список магазинов' в Shop_Row
.
.shoplist div{
float:right;
}
И теперь это работает, но влияет на всех участников Shop_Item_01.
Почему это происходит ? есть ли способ избежать этого во втором подходе?
@Chris Я знаю, я хочу знать, почему он действует по-разному, когда я указываю на один и тот же div в css?
Код:
.shoplist div{ float:right; }
означает, что он влияет на все элементы div под ним, а не только на .shoplist Прочтите это для получения дополнительной информации.
Избежать этого невозможно, потому что так работает 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>
CSS автоматически добавляет стиль ко всем потомкам, если вы используете селектор потомков (пробел):
.shoplist div {
float:right;
}
Чтобы предотвратить это, вы можете использовать дочерний селектор >
:
.shoplist > div {
float:right;
}
Если вы собираетесь что-то плавать, это нужно позиционировать. Я бы начал с этого, но вы также можете использовать для этого Flexbox.