如何在元素内定位第一个孩子

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'的第一个子对象 我尝试过

但不起作用

Answer 1

ConvertFrom-Json

这将影响父母（第二个div）的直接第一个孩子

div div > :first-child

这将影响每个孩子的孩子

div div :first-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;
}