div中div的第一个元素

Question

代码

<div class="row mgu-w-tdw-brow">
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>

CSS

.mgu-w-tdw-brow div.mgu-w-tdw-box:first-child { border: 2px solid green; }

我想接近＆＃34; mgu-w-tdw-box＆＃34;的第一个元素。在行内＆＃34; mgu-w-tdw-brow＆＃34;。不幸的是，这不起作用。

感谢您的帮助。

Answer 1

这就是你需要的，首先在div中选择div:first-child和样式

.mgu-w-tdw-brow div:first-child .mgu-w-tdw-box {
  border:2px solid green;
}

<div class="row mgu-w-tdw-brow">
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
  
</div>  

Answer 2

我更喜欢一个更好的可读版本，它在本例中也是如此。

.mgu-w-tdw-brow >:first-child {
 border: 2px solid green;
 }

以下是jsfiddle。

Answer 3

.mgu-w-tdw-brow  [class*="col"]:nth-child(1) .mgu-w-tdw-box{
border:solid 2px #000;
}

<div class="row mgu-w-tdw-brow">
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-teaser-list-1x1-large">...</div>
</div>
  
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="mgu-w-tdw-box mgu-widget-teaser-1x1">...</div>
</div>
  
</div>