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

我想在"mgu-w-tdw-brow"行中接近"mgu-w-tdw-box"的第一个元素.不幸的是,这不起作用.

感谢帮助.

Answer 1

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

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