如何在动态引导行中设置第一列的样式

Question

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

更新

<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>

以下是它正在生成的CSS

$sql = mysqli_query($connection,"SELECT Something FROM something WHERE ID = '1';");
$row = mysqli_fetch_object($sql);
$description = $row->DESCRIPTION;


<p style="margin-top: 3%">
   <?php echo$description?>
</p>

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

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

更新：我认为不可能，你有一行中的所有col。在Bootstrap中它会起作用，但你不能将所有第一个元素作为用户在页面中看到的内容，因为它与屏幕分辨率不同。

如果您只想设置第一个col的样式，可以使用此代码

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

Answer 2

您应该尝试使用第一个子类创建边框，Ex

.row .col-lg-3:first-child{
    border:1px solid red;
}