css - 如何定位元素中的第一个 child

Question

我想用 css 定位嵌套在元素中的元素的第一个子元素

<div  class="message message-send">
  <div class="message-container">
    <div class="message-avatar">
      <div class="msg-avatar"></div>
      <div class="message-msg">
      <div class="msg-contentContainer">
        <div class="msg-text">
          <div class="msg-container">
            <p class="msg-msg msg-size">hello</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: 尝试过

.message-send .msg-text> *:first-child {
  border-top-right-radius:.999em;
}

我想将“.msg-text”定位为“.message-send”的第一个 child 我试过了

但是没用

Answer 1

div div > :first-child

这将影响父级的直接第一个子级(第二个 div)

div div :first-child

这将影响每个 child 的第一个 child

p{
margin:0;
background:green;
}
span{
display:block;
}
div{
  background:blue;
  padding:10px;
  color:#fff!important;
}
div div > :first-child{
  background:red;
  display:block;
  width:100px;
}

<div>
  <div>
    <span>
       1
      <p>2</p>
      <p>3</p>
    </span>
    <span>22</span>
  </div>
</div>