将不同样式的CSS应用于Bootstrap手风琴内的表
[英]Apply CSS different styles to tables inside Bootstrap accordion
问题描述
我在div中有一个自举手风琴（ID：avs4），每个面板标题都有某种颜色，每个面板主体都有一个具有相同类的表（avactr）：
#avs4 :nth-child(1) tbody tr:nth-child(1) td:first-child { background: #047AB7; } #avs4 :nth-child(2) tbody tr:nth-child(1) td:first-child { background: #42B77A; } #avs4 :nth-child(1) tbody tr:nth-child(1) td:first-child a, #avs4 :nth-child(2) tbody tr:nth-child(1) td:first-child a { color: #FFF; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="avs4"> <div class="panel-group" id="avancesacorf" role="tablist" aria-multiselectable="true" style="margin-bottom:0px;border-left: 1px solid #047ab7;border-right: 1px solid #047ab7;"> <div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;"> <div class="panel-heading" role="tab" id="heading16" style="padding: 0px;background: none;"> <table class="table avelem" style="margin-bottom:0px;"> <tbody> <tr> <td style="text-align:center;width:50%;"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse16" aria-expanded="false" aria-controls="collapse16">Progress</a> </td> <td style="background:#FFF;text-align:center;">User 01</td> </tr> </tbody> </table> </div> <div id="collapse16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading16" aria-expanded="false" style="height: 0px;"> <div class="panel-body" style="padding:0px;"> <table class="table avactr" style="margin-bottom:0px;"> <tbody> <tr> <td style="width:50%;text-align:center;">Files</td> <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/LuZN13YUT6mc73TJeIs4"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> doc-prueba.docx</button></a></td> </tr> <tr> <td style="text-align:center;">Rate 01</td> <td style="background:#FFF;color:#000;text-align:center;">5 / 5</td> </tr> <tr> <td style="text-align:center;">Rate 02</td> <td style="background:#FFF;color:#000;text-align:center;">300 / 300</td> </tr> </tbody> </table> </div> </div> </div> <div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;"> <div class="panel-heading" role="tab" id="heading14" style="padding: 0px;background: none;"> <table class="table avelem" style="margin-bottom:0px;"> <tbody> <tr> <td style="text-align:center;width:50%;"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse14" aria-expanded="false" aria-controls="collapse14">Progress</a> </td> <td style="background:#FFF;text-align:center;">User 02</td> </tr> </tbody> </table> </div> <div id="collapse14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading14" aria-expanded="false" style="height: 0px;"> <div class="panel-body" style="padding:0px;"> <table class="table avactr" style="margin-bottom:0px;"> <tbody> <tr> <td style="width:50%;text-align:center;">Files</td> <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/twvU9uWSvvCWPh2jvuOQ"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> modelo-doc.jpg</button></a></td> </tr> <tr> <td style="text-align:center;">Rate 01</td> <td style="background:#FFF;color:#000;text-align:center;">1 / 1</td> </tr> <tr> <td style="text-align:center;">Rate 02</td> <td style="background:#FFF;color:#000;text-align:center;">10 / 100</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
我想根据面板标题颜色为每个表“ avactr”类应用不同的样式，例如，尝试使用以下代码来应用第一个表：
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(1) td:first-child {
background: #047AB7;
color: #FFF;
}
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(2) td:first-child {
background: #047AB7;
color: #FFF;
}
#avs4 :nth-child(1) table.avactr tbody tr:nth-child(3) td:first-child {
background: #047AB7;
color: #FFF;
}
但这不起作用，我该如何解决？
1 个解决方案
解决方案1
0 2018-07-14 14:33:12
css伪类:nth-child(1)仅在自身悬空时不起作用，但是如果您告诉它要定位的元素类型如.panel:nth-child(1)它似乎将按照您期望的方式工作.panel:nth-child(1) 。
#avs4 .panel:nth-child(1) tbody tr:nth-child(1) td:first-child { background: #047AB7; } #avs4 .panel:nth-child(2) tbody tr:nth-child(1) td:first-child { background: #42B77A; } #avs4 .panel:nth-child(1) tbody tr:nth-child(1) td:first-child a, #avs4 .panel:nth-child(2) tbody tr:nth-child(1) td:first-child a { color: #FFF; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="avs4"> <div class="panel-group" id="avancesacorf" role="tablist" aria-multiselectable="true" style="margin-bottom:0px;border-left: 1px solid #047ab7;border-right: 1px solid #047ab7;"> <div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;"> <div class="panel-heading" role="tab" id="heading16" style="padding: 0px;background: none;"> <table class="table avelem" style="margin-bottom:0px;"> <tbody> <tr> <td style="text-align:center;width:50%;"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse16" aria-expanded="false" aria-controls="collapse16">Progress</a> </td> <td style="background:#FFF;text-align:center;">User 01</td> </tr> </tbody> </table> </div> <div id="collapse16" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading16" aria-expanded="false" style="height: 0px;"> <div class="panel-body" style="padding:0px;"> <table class="table avactr" style="margin-bottom:0px;"> <tbody> <tr> <td style="width:50%;text-align:center;">Files</td> <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/LuZN13YUT6mc73TJeIs4"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> doc-prueba.docx</button></a></td> </tr> <tr> <td style="text-align:center;">Rate 01</td> <td style="background:#FFF;color:#000;text-align:center;">5 / 5</td> </tr> <tr> <td style="text-align:center;">Rate 02</td> <td style="background:#FFF;color:#000;text-align:center;">300 / 300</td> </tr> </tbody> </table> </div> </div> </div> <div class="panel panel-default" style="margin-top:0px;border-radius:0px;border:none;"> <div class="panel-heading" role="tab" id="heading14" style="padding: 0px;background: none;"> <table class="table avelem" style="margin-bottom:0px;"> <tbody> <tr> <td style="text-align:center;width:50%;"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#avancesacorf" href="#collapse14" aria-expanded="false" aria-controls="collapse14">Progress</a> </td> <td style="background:#FFF;text-align:center;">User 02</td> </tr> </tbody> </table> </div> <div id="collapse14" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading14" aria-expanded="false" style="height: 0px;"> <div class="panel-body" style="padding:0px;"> <table class="table avactr" style="margin-bottom:0px;"> <tbody> <tr> <td style="width:50%;text-align:center;">Files</td> <td style="background:#FFF;color:#000;text-align:center;"><a target="_blank" href="https://cdn.filestackcontent.com/twvU9uWSvvCWPh2jvuOQ"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> modelo-doc.jpg</button></a></td> </tr> <tr> <td style="text-align:center;">Rate 01</td> <td style="background:#FFF;color:#000;text-align:center;">1 / 1</td> </tr> <tr> <td style="text-align:center;">Rate 02</td> <td style="background:#FFF;color:#000;text-align:center;">10 / 100</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
将不同的 CSS 样式应用于 Joomla 智能搜索自动完成建议
[英]Apply different CSS styles to Joomla smart search autocomplete suggestions
CSS - 设计一个引导手风琴，所以有源卡头是不同的颜色
[英]CSS - styling a bootstrap accordion so active card headers are a different color
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.