Welcome to ZaiNaLe Developer Community-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k 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 Answer

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to ZaiNaLe Developer Community-Open, Learning and Share
...