Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.0k views
in Technique[技术] by (71.8m points)

html - Why doesn't my first-child selector work on this nested table?

tr:first-child:hover .td-header-title {
    background: orange;
}
<tr>
   <td class="td-header-title">Header title 1
      <tr>
          <td class="td-header-title">Header title 2</td>
      </tr>
   </td>
</tr>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The default background value for all elements is: transparent. As you see in the snippet, the child div background will also be red if you hover the parent element. The child background-color still is transparent and as such the red color will be seen. "It shines through".

div {
  padding: 10px;
  border: 1px solid black;
}

.parent:hover {
  background-color: red;
}
<div  class="parent">Parent
  <div class="child">Child</div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...