<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”的第一个元素。不幸的是，这样做不起作用。

谢谢帮忙。

- Stiller Eugen

---

你添加了Bootstrap CSS吗？ - Shivkumar kondi

是的，这是框架的一部分。 - Stiller Eugen

Answer 1

this is what you need, first select div:first-child and style inside 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>  

- Jishnu V S

---

请勾选答案，如果对您有用的话，谢谢。 - Jishnu V S

Answer 2

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

- Vijay Sharma

Answer 3

我更喜欢一个更易读的版本，它可以为这个例子做同样的事情。

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

这里有一个jsfiddle链接。

- Gehtnet

---

我知道这不是很整洁，而且div中的所有第一个元素都将是绿色的。只是一个更简单的方法。 - Gehtnet