css - 如何仅在动态 Bootstrap 行中设置第一列的样式

Question

我正在设计一个基于 Opencart 的购物车。以下是产品更新的 Category.tpl 文件中代码的主要部分

  <div class="row">
    <?php foreach ($products as $product) { ?>
    <div class="product-layout product-list col-xs-12">
      <div class="product-thumb">

        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a> </div>
        <div>

下面是它生成的CSS

<div class="row">
              <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
                 <div class="product-thumb">

             <div class="image"><a href="http://rangawoods.tryfcomet.com/index.php?route=product/product&amp;path=78&amp;product_id=194"><img src="http://rrrwoods.com/image/cache/catalog/Door/SMD-001-500x500.jpg" alt="SMD-001" title="SMD-001" class="img-responsive"></a> </div>


        <div>

现在我只需要在创建的行中设置第一列的样式。我该怎么做？我附上了一张图片以供快速引用。

Answer 1

尝试

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

例子

.row div[class^="col"]:first-child {
    border: 3px solid black;
}

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    two
  </div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Three
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    Four
  </div>
</div>

更新: 使用您呈现的 html 我认为这是不可能的，您将所有列都放在一行中。在 Bootstrap prespective 中它会起作用，但你不能将用户在页面中看到的所有第一个元素作为目标，因为它因屏幕分辨率而异。

如果你只需要设置第一个列的样式，你可以使用这段代码

.row .product-layout:first-child {
    border: 3px solid red;
}