“阅读更多”在CSS不工作在表

Question

我试图把第三列'阅读更多'箭头，它应该扩大第一列的文本。 这是我的代码，在表格外运行良好，但在表格中不行。 我的错误在哪里？我不想使用jQ或JS。

.read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    opacity: 0; 
 
    display: none; 
 
} 
 

 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    display: block; 
 
} 
 

 
.read-more-state ~ .read-more-trigger:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: .6rem solid red; 
 
    border-right: .6rem solid transparent; 
 
    border-left: .6rem solid transparent; 
 
    display: inline-block; 
 
    content: ''; 
 
} 
 

 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    transform: rotate(180deg); 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    border:1px solid black; 
 
}

<article> 
 
    <h4>Lorem ipsum</h4> 
 
    <input type="checkbox" class="read-more-state" id="post-1" /> 
 
    <div class="read-more-wrap"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p> 
 
     <span class="read-more-target" id="post-1"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p> 
 
     </span> 
 
    </div> 
 
    <label for="post-1" class="read-more-trigger"></label> 
 
</article> 
 

 
<hr> 
 

 
<table> 
 
    <tr> 
 
     <input type="checkbox" class="read-more-state" id="post-2" /> 
 
     <td class="read-more-wrap">Lorem ipsum dolor sit amet. 
 
      <p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p> 
 
     </td> 
 
     <td>100 pts</td> 
 
     <td><label for="post-2" class="read-more-trigger">???</label></td> 
 
    </tr> 
 
</table>

Answer 1

得到了问题。下不能有<input />。稍微改变一下代码。另外，在<span>里面使用<p>似乎不是一个好主意。改变，要<div>：

.read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    display: none; 
 
} 
 

 
.read-more-state:checked + table .read-more-wrap .read-more-target { 
 
    display: block; 
 
} 
 

 
.read-more-trigger:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: .6rem solid red; 
 
    border-right: .6rem solid transparent; 
 
    border-left: .6rem solid transparent; 
 
    display: inline-block; 
 
    content: ''; 
 
} 
 

 
.read-more-state:checked + table .read-more-trigger:before { 
 
    transform: rotate(180deg); 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    border:1px solid black; 
 
}

<input type="checkbox" class="read-more-state" id="post-2" /> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div class="read-more-wrap"> 
 
     <p>Lorem ipsum dolor sit amet.</p> 
 
     <p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p> 
 
     </div> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-2" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

感谢@Praveen库马尔我得到这个最终代码。 CSS没有父选择器，所以我不能只通过检查输入状态将'read-more'trinagle变成180deg。

.read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    opacity: 0; 
 
    display: none; 
 
} 
 

 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    display: block; 
 
} 
 

 
.read-more-trigger:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: .6rem solid red; 
 
    border-right: .6rem solid transparent; 
 
    border-left: .6rem solid transparent; 
 
    display: inline-block; 
 
    content: ''; 
 
} 
 

 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    transform: rotate(180deg); 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    border:1px solid black; 
 
    width: 10rem; 
 
    vertical-align:top; 
 
}

<article> 
 
    <h4>CSS 'read-more' table version</h4> 
 
    <input type="checkbox" class="read-more-state" id="post-1" /> 
 
    <div class="read-more-wrap"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p> 
 
    <span class="read-more-target" id="post-1"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p> 
 
    </span> 
 
    </div> 
 
    <label for="post-1" class="read-more-trigger"></label> 
 
</article> 
 

 
<hr> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-2" /> 
 
     <span class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span> 
 
     </span> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-2" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-3" /> 
 
     <span class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span class="read-more-target" id="post-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span> 
 
     </span> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-3" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class="read-more-state" id="post-4" /> 
 
     <div class="read-more-wrap"> 
 
     Lorem ipsum dolor sit amet. 
 
     <span class="read-more-target" id="post-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</span> 
 
     </div> 
 
    </td> 
 
    <td>100 pts</td> 
 
    <td> 
 
     <label for="post-4" class="read-more-trigger"></label> 
 
    </td> 
 
    </tr> 
 
</table>