如何为三个标签中的每个表格制作不同的重复颜色？

Question

我有三个标签。每个标签都有一个表格。选项卡中的每个表格都在表格背景中重复出现浅蓝色。我希望每个表在背景中具有不同的重复颜色。因此，每个选项卡都有一个具有不同背景重复颜色的表格。

• 我希望tab-1有一个重复出现的颜色1
的表格
• tab-2有一个重复出现颜色的表2
• tab-3有一个重复发生颜色的表3

因此每个标签中都有一个表格，其背景颜色不同。

http://jsfiddle.net/Lance_Bitner/4zLkb6v0/

 tr:nth-child(even) {
  background-color: rgba(197, 232, 255, .2);
  }

Answer 1

除非您需要在选项卡或表中添加类或ID，否则您需要按选项卡索引引用每个表。由于nth-child伪选择器不适用于基于类的选择器，因此您需要选择标签的子div：

.tabs > div:nth-child(2) table tr td {
  color: red;
}

然后你可以随意做斑马条纹：

.tabs > div:nth-child(2) table tr:nth-child(even) td {
  color: blue;
}

<强> Demo

Answer 2

我在你的小提琴中添加了以下css：

.tabs .tab:nth-of-type(1) tr {
  background-color: #ffcc00;
  }
.tabs .tab:nth-of-type(2) tr {
  background-color: #00cc00;
  }
.tabs .tab:nth-of-type(3) tr {
  background-color: #00ff00;
  }

Demo

这允许您根据您的要求在每个选项卡上单独自定义每个表的背景颜色。

Answer 3

你可以使用jQuery作为实现这一目标的替代方法。

＆＃13;

＆＃13;

$('table').each(function(i,v){
var redStep = parseInt(128/$('table').length);
var greenStep = parseInt(64/$('table').length);
$(v).find('tr:nth-child(even)').css('background-color','rgb('+(128+i*redStep)+', '+(192+i*greenStep)+', 255)')
});

＆＃13;

.tabs {
  font-size: 0;
  margin: 25px 0;
}

.tabs:after {
  clear: both;
  content: '';
  display: table;
}

.tabs .tab {
  display: inline;
}

.tabs .tab-label {
  background: rgba(222, 222, 222, 1.00);
  border: 1px solid #ccc;
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
  left: 1px;
  margin-left: -1px;
  padding: 10px;
  position: relative;
  vertical-align: bottom;
}

.tabs .tab > [type="radio"] {
  clip: rect(0 0 0 0);
  height: 1px;
  opacity: 0;
  position: fixed;
  width: 1px;
  z-index: -1;
}

.tabs .tab-panel {
  display: inline;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 0;
  width: 0;
}

.tabs .tab-content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  background: white;
  padding: 0 20px;
  border: 1px solid #ccc;
  float: left;
  font-size: 16px;
  font-size: 1rem;
  margin-top: -1px;
  width: 100%;
}

.tabs .tab [type="radio"]:checked + .tab-label {
  background: white;
  border-bottom-width: 0;
  padding-bottom: 11px;
  z-index: 1;
}

.tabs .tab [type="radio"]:checked ~ .tab-panel {
  display: inline;
}


/*=======================================INTERNET EXPLORER 8 and below =======================================*/

@media \0screen\,
screen\9 {
  /* IE7 and IE6 */
  .tabs {
    zoom: 1;
  }
  /* IE8 and below */
  .tabs .tab .tab-radio {
    filter: Alpha(opacity=0);
    position: absolute;
    z-index: -1;
  }
  /* IE7 and IE6 */
  .tabs .tab .tab-panel,
  {
    display: none;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
  }
  /* IE7 and IE6 */
  .tabs .tab-content,
  {
    float: none;
    padding-bottom: 1px;
    padding-top: 1px;
    width: auto;
  }
  /* IE8 and below */
  .tabs .checked label {
    background: white;
    border-bottom-width: 0;
    padding-bottom: 11px;
    z-index: 1;
  }
  /* IE8 */
  .tabs .checked .tab-panel {
    display: inline;
  }
  /* IE7 and IE6 */
  .tabs .checked .tab-panel,
  {
    display: inline;
    float: left;
    width: 100%;
  }
}


/*=======================================UNIMPORTANT STYLES BEGIN HERE=======================================*/

.tabs a:link,
.tabs a:visited,
.tabs a:hover,
.tabs a:focus,
.tabs a:active {
  color: #36A;
}

code,
pre {
  font-family: 'Lucida Console', monospace;
}

pre {
  background: #191919;
  color: #8DA;
  overflow-x: auto;
  padding: 1em;
}

p > code {
  background: #DED;
  margin: -2px;
  padding: 2px;
}

.for {
  display: inline-block;
  position: relative;
}

.for:after {
  background: #DDD;
  bottom: 150%;
  color: #222;
  font-family: sans-serif;
  font-size: 12px;
  opacity: 0;
  padding: .5em;
  pointer-events: none;
  position: absolute;
  right: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  white-space: nowrap;
}

.for:hover:after {
  opacity: 1;
}

.for.default-tab {
  color: #8AD;
}

.for.ie8-and-below {
  color: #DA8;
}

.for.default-tab:after {
  content: 'For default tab';
}

.for.ie8-and-below:after {
  content: 'For IE8 and below';
}


/* and just for fun... */

@media only screen and (max-width: 43em) {
  .tabs .tab > label {
    background: #BBB;
    border-color: #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
  .tabs .tab [type="radio"]:checked + .tab-label {
    background: #222;
    border-color: #444;
    color: #DDD;
  }
}

.name {
  min-width: 350px !important;
}

td,
th {
  padding: 6px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: left;
}

.right-image {
  /*background-repeat: no-repeat;
        background-position: top right;
        background-image: url("~/Content/Images/Untitled-1.png");
        background-image: linear-gradient(rgba(167,218,255,0.20),white );
        background-image: url("~/content/images/Untitled-1.png");*/
  width: 510px;
  position: absolute;
  right: 0px;
  top: -5px;
  z-index: 50;
}

.tabs a {
  cursor: pointer;
  padding: 5px;
  background: #fff;
  color: #000;
  border-top: 1px solid #666;
  border-left: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
  display: inline;
}

.tabs a:hover,
.tabs a.active {
  background: #666;
  color: black;
}

.tabContent {
  border: 1px solid #4cff00;
  margin: 4px 0;
  padding: 5px;
  height: 500px;
}

#day2 {
  margin-top: -24px;
}

#day3 {
  margin-top: -48px;
}

.center-image {
  position: absolute;
  opacity: .3;
  width: 90%;
  left: 170px;
  top: -75px;
  z-index: 10;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.text-glow {
  /*text-shadow: -3px 0px 10px #FFF, 3px 0px 10px #FFF, 0px 0px 10px #FFF, -3px -3px 10px #FFF, 3px -3px 10px #FFF, 0px -3px 10px #FFF, -3px 3px 10px #FFF, 3px 3px 10px #FFF, 0px 3px 10px #FFF;
        */
  z-index: 20;
  margin-left: -25px;
}

.main2 {
  padding-left: 25px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 97%;
  border: 0px solid #ddd;
  margin: 25px;
}

th,
td {
  border: none;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: rgba(130, 232, 255, .2);
}

.font {
  font-size: 18px;
  font-weight: bold;
  color: black;
}

.font:hover,
.font:active,
.font:focus,
.font:visited,
.font:link,
.font:target,
:target {
  color: rgba(255, 117, 0, 1.00);
}

.font2 {
  color: rgba(255, 117, 0, 1.00);
}

.tabs2 {
  background: rgba(255, 86, 0, 1.00);
}

label {
  cursor: pointer;
}

.name {
  min-width: 350px !important;
}

.right-image {
  /*background-repeat: no-repeat;
        background-position: top right;
        background-image: url("~/Content/Images/Untitled-1.png");
        background-image: linear-gradient(rgba(167,218,255,0.20),white );
        background-image: url("~/content/images/Untitled-1.png");*/
  width: 510px;
  position: absolute;
  right: 0px;
  top: -5px;
  z-index: 50;
}

.tabs {
  padding-right: 25px;
}

.tabs a {
  cursor: pointer;
  padding: 5px;
  background: #fff;
  color: #000;
  border-top: 1px solid #666;
  border-left: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-bottom: 1px solid #ff0000;
  display: inline;
}

.tabs a:hover,
.tabs a.active {
  background: #666;
  color: #fff;
}

.tabContent {
  border: 1px solid #4cff00;
  margin: 4px 0;
  padding: 5px;
  height: 500px;
}

.center-image {
  position: absolute;
  opacity: 1.0;
  width: 100%;
  height: 250px;
  z-index: 10;
  left: 0px;
  top: -10px;
  /*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        background-image: url("~/Content/Images/banner3.png")no-repeat;*/
}

.center-image > img {
  width: 100%;
}

.text-glow {
  /*text-shadow: -3px 0px 10px #FFF, 3px 0px 10px #FFF, 0px 0px 10px #FFF, -3px -3px 10px #FFF, 3px -3px 10px #FFF, 0px -3px 10px #FFF, -3px 3px 10px #FFF, 3px 3px 10px #FFF, 0px 3px 10px #FFF;
        */
  z-index: 20;
  position: absolute;
  left: 25px;
  top: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked="">
    <label class="tab-label" for="tab-1"> <b class="font">Day 1 - July 19, 2016</b></label>
    <div class="tab-panel">
      <div class="tab-content">
        <table>
          <tbody>
            <tr>
              <th class="name">Course Name</th>
              <th>Course Description</th>
              <th>Presenter(s)</th>
            </tr>

            <tr>
              <td>New MyPerformance Automated Tool: First You Need the Tool</td>
<td>New MyPerformance Automated Tool: First You Need the Tool</td>
<td>New MyPerformance Automated Tool: First You Need the Tool</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-2" name="tab-group-1">
    <label class="tab-label" for="tab-2">
      <b class="font">Day 2 - July 20, 2016</b>
    </label>
    <div class="tab-panel">
      <div class="tab-content">
        <table>
          <tbody>
            <tr>
              <th class="name">Course Name</th>
              <th>Course Description</th>
              <th>Presenter(s)</th>
            </tr>


            <tr>
              <td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
<td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
<td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
</tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-3" name="tab-group-1">
    <label class="tab-label" for="tab-3"> <b class="font">Day 3 - July 21, 2016</b></label>
    <div class="tab-panel">
      <div class="tab-content">
        <table>
          <tbody>
            <tr>
              <th class="name">Course Name</th>
              <th>Course Description</th>
              <th>Presenter(s)</th>
            </tr>

 <tr>
              <td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
<td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
<td>Basic Health and Life Insurance Programs: Throw me a Lifeline</td>
</tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;