为什么我的斑马条纹 CSS 不适用于我的表格行？

【问题标题】：Why is my zebra-striping CSS not applying to my table rows?为什么我的斑马条纹 CSS 不适用于我的表格行？
【发布时间】：2017-03-06 23:16:32
【问题描述】：

我尝试在 React 应用程序 here 中对我的表进行斑马条纹处理。但是，它没有被应用。以下是相关样式：

tr:nth-child(even) {
    background-color: rgba(0,100,1,0.5)
}

tr:nth-child(odd) {
    background-color: rgba(0,100,1,0.3)
}

还有完整的演示：

'use strict';

var /*var Leaderboard = React.createClass({
    getInitialState: function(){
    /*var recentCampers= []; 
    var allTimeCampers= [];*/
//return {toggle30: 'true'};
/*return {recentCampers: [],
allTimeCampers: [],
toggle30: 'true'};
this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this);
this.toggle30= this.toggle30.bind(this);  */
/*    },
  
componentDidMount: function(){return axios.all([this.getTopRecentCampers(),this.getTopAlltimeCampers()]).then(function(arr){return {
recentCampers: arr[0].data,
allTimeCampers: arr[1].data};
console.log(this.state.recentCampers[0].username);     })},
/*
getTopRecentCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');},
  
getTopAlltimeCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');},

toggleViewOne: function(){this.setState({toggle30: 'true'});},

toggleViewTwo: function(){this.setState({toggle30: 'false'});},  
  
 /* render: function(){return (<div>    
      <h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days &nbsp;<span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points &nbsp;<span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp  <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive">  <table className="table"> <thead> <tr> <th> <td> # </td> <td> Camper name </td> <td> Points in last month </td> <td> All time points </td> </th> </tr> </thead> <tbody>
//</tbody> </table> </div> </div>);} */
/*  });
var Tbody = React.createClass({
render: function(){return (<tbody> {} </tbody>);}  
  
});*/
/*</tr> <tr> <td> gtew</td> </tr> <tr> <td> gffs</td> </tr>this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this) */
/*
ReactDOM.render(<Leaderboard />,document.getElementById('freeCodeCamp'));
----------------------------------------------------------------------------                                                                            */Leaderboard = React.createClass({
  displayName: 'Leaderboard',

  getInitialState: function getInitialState() {
    return {
      recentCampers: [],
      allTimeCampers: [],
      toggle: 'recentCampers'
    };
  },

  componentWillMount: function componentWillMount() {
    return this.getRequest();
  },

  getRequest: function getRequest() {
    return axios.all([this.getTopRecentCampers(), this.getTopAlltimeCampers()]).then(function (arr) {
      this.setState({
        recentCampers: arr[0].data,
        allTimeCampers: arr[1].data
      });
      /*var recent= [];
      recent= this.state.recentCampers;
      for (var i=0;i>=100;i++){return recent[i];};
      //console.log(this.state.recentCampers[0].username);*/
    }.bind(this));
  },

  getTopRecentCampers: function getTopRecentCampers() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');
  },

  getTopAlltimeCampers: function getTopAlltimeCampers() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');
  },

  toggleViewOne: function toggleViewOne() {
    this.setState({
      toggle: 'recentCampers'
    });
  },

  toggleViewTwo: function toggleViewTwo() {
    this.setState({
      toggle: 'allTimeCampers'
    });
  },

  render: function render() {
    return React.createElement(
      'div',
      null,
      '    ',
      '     ',
      React.createElement(
        'h6',
        null,
        'Sort by:'
      ),
      ' ',
      React.createElement(
        'button',
        { onClick: this.toggleViewOne, className: 'btn' },
        'Points in past 30 days  ',
        React.createElement(
          'span',
          { className: 'fa fa-sort-desc' },
          ' '
        )
      ),
      ' ',
      React.createElement(
        'button',
        { onClick: this.toggleViewTwo, className: 'btn' },
        ' All time points  ',
        React.createElement(
          'span',
          { className: 'fa fa-sort-desc' },
          ' '
        ),
        ' '
      ),
      ' ',
      React.createElement(
        'h1',
        null,
        ' freeCodeCamp  ',
        React.createElement(
          'span',
          { className: 'fa fa-free-code-camp' },
          ' '
        ),
        ' '
      ),
      ' ',
      React.createElement('hr', null),
      ' ',
      React.createElement(
        'div',
        { className: 'table-responsive' },
        '  ',
        React.createElement(
          'table',
          { className: 'table' },
          ' ',
          React.createElement(
            'thead',
            null,
            ' ',
            React.createElement(
              'tr',
              null,
              ' ',
              React.createElement(
                'th',
                null,
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '80px' }, className: 'text-center' },
                  ' # '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '600px' } },
                  ' Camper name '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '400px' }, className: 'text-center' },
                  ' Points in last month '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '400px' }, className: 'text-center' },
                  ' All time points '
                ),
                ' '
              ),
              ' '
            ),
            ' '
          ),
          ' ',
          React.createElement(
            'tbody',
            null,
            '  ',
            React.createElement(Map, { data: this.state[this.state.toggle] })
          ),
          ' '
        ),
        ' '
      ),
      ' '
    );
  }
});
//{<Tbody data={this.state}
/*                           
 --------------------------------------------------------------------------                                                                        */
var Map = React.createClass({
  displayName: 'Map',

  render: function render() {
    var rows = this.props.data.map(function (row, index) {
      return React.createElement(Tbody, { rank: index + 1, data: row });
    });

    return React.createElement(
      'tbody',
      { id: 'stripe' },
      rows
    );
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
var Tbody = React.createClass({
  displayName: 'Tbody',

  render: function render() {
    return React.createElement(
      'div',
      null,
      ' ',
      /*<h1>{this.props.data.username}</h1>*/React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          { style: { width: '80px' }, className: 'text-center' },
          this.props.rank + '.'
        ),
        React.createElement(
          'td',
          { style: { width: '600px' } },
          React.createElement(
            'a',
            { target: '_blank', href: 'http://freecodecamp.com/' + this.props.data.username },
            React.createElement('img', { src: this.props.data.img }),
            '   ',
            React.createElement(
              'span',
              null,
              this.props.data.username
            )
          )
        ),
        React.createElement(
          'td',
          { id: 'recent', className: 'text-center' },
          this.props.data.recent
        ),
        React.createElement(
          'td',
          { id: 'all', className: 'text-center' },
          this.props.data.alltime
        )
      ),
      ' '
    );
    //console.log(JSON.stringify(this.props));*/
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
ReactDOM.render(React.createElement(Leaderboard, null), document.getElementById('freeCodeCamp'));
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(161deg, #006401 0%, #FCFFEE 100%);
  background-attachment: fixed;
  color: #502d17;
  margin-left: 20px;
  margin-right: 20px;
}

button {
  margin: 5px;
  background-image: -webkit-linear-gradient(#006401, #FCFFEE);
  background-attachment: fixed;
  color: #FCFFEE;
  box-shadow: inset -1px -3px 10px 1px #515151;
  margin-bottom: 20px;
}

button:active {
  transform: translate(0, 3px);
  box-shadow: none;
  text-decoration: none;
  outline: none;
}
button:hover, button:active, button:visited {
  text-decoration: none;
  outline: none;
}

h6 {
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
}

h1 {
  color: rgba(245, 245, 245, 0.5);
  margin-left: 5px;
}

.fa-free-code-camp {
  font-size: 1em;
  color: rgba(245, 245, 245, 0.7);
}

table, td {
  border: 1px solid grey;
  table-layout: fixed;
}

tr:nth-child(even) {
  background-color: rgba(0, 100, 1, 0.5);
}

tr:nth-child(odd) {
  background-color: rgba(0, 100, 1, 0.3);
}

img {
  border-radius: 100%;
  height: 60px;
}

a {
  text-decoration: none;
  color: #502d17;
}

#all {
  max-width: 280px;
  min-width: 280px;
}

#recent {
  max-width: 280px;
  min-width: 280px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="freeCodeCamp"></div>

【问题讨论】：

    标签： html css reactjs


    【解决方案1】：

    由于您的 HTML 标记是在您的 codepen 中提取的，我不确定这对未来的用户有多大用处，但在您的 codepen 上下文中，您的选择器不正确。

    您的tbody 不包含tr 兄弟姐妹，但每个tr 都包装在div 中，因此您需要定位它们。

    tbody>div:nth-child(even)
 background-color: rgba(0,100,1,0.5)

tbody>div:nth-child(odd)
 background-color: rgba(0,100,1,0.3)

    查看更新的CodePen

    'use strict';

var /*var Leaderboard = React.createClass({
    getInitialState: function(){
    /*var recentCampers= []; 
    var allTimeCampers= [];*/
//return {toggle30: 'true'};
/*return {recentCampers: [],
allTimeCampers: [],
toggle30: 'true'};
this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this);
this.toggle30= this.toggle30.bind(this);  */
/*    },
  
componentDidMount: function(){return axios.all([this.getTopRecentCampers(),this.getTopAlltimeCampers()]).then(function(arr){return {
recentCampers: arr[0].data,
allTimeCampers: arr[1].data};
console.log(this.state.recentCampers[0].username);     })},
/*
getTopRecentCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');},
  
getTopAlltimeCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');},

toggleViewOne: function(){this.setState({toggle30: 'true'});},

toggleViewTwo: function(){this.setState({toggle30: 'false'});},  
  
 /* render: function(){return (<div>    
      <h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days &nbsp;<span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points &nbsp;<span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp  <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive">  <table className="table"> <thead> <tr> <th> <td> # </td> <td> Camper name </td> <td> Points in last month </td> <td> All time points </td> </th> </tr> </thead> <tbody>
//</tbody> </table> </div> </div>);} */
/*  });
var Tbody = React.createClass({
render: function(){return (<tbody> {} </tbody>);}  
  
});*/
/*</tr> <tr> <td> gtew</td> </tr> <tr> <td> gffs</td> </tr>this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this) */
/*
ReactDOM.render(<Leaderboard />,document.getElementById('freeCodeCamp'));
----------------------------------------------------------------------------                                                                            */Leaderboard = React.createClass({
  displayName: 'Leaderboard',

  getInitialState: function getInitialState() {
    return {
      recentCampers: [],
      allTimeCampers: [],
      toggle: 'recentCampers'
    };
  },

  componentWillMount: function componentWillMount() {
    return this.getRequest();
  },

  getRequest: function getRequest() {
    return axios.all([this.getTopRecentCampers(), this.getTopAlltimeCampers()]).then(function (arr) {
      this.setState({
        recentCampers: arr[0].data,
        allTimeCampers: arr[1].data
      });
      /*var recent= [];
      recent= this.state.recentCampers;
      for (var i=0;i>=100;i++){return recent[i];};
      //console.log(this.state.recentCampers[0].username);*/
    }.bind(this));
  },

  getTopRecentCampers: function getTopRecentCampers() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');
  },

  getTopAlltimeCampers: function getTopAlltimeCampers() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');
  },

  toggleViewOne: function toggleViewOne() {
    this.setState({
      toggle: 'recentCampers'
    });
  },

  toggleViewTwo: function toggleViewTwo() {
    this.setState({
      toggle: 'allTimeCampers'
    });
  },

  render: function render() {
    return React.createElement(
      'div',
      null,
      '    ',
      '     ',
      React.createElement(
        'h6',
        null,
        'Sort by:'
      ),
      ' ',
      React.createElement(
        'button',
        { onClick: this.toggleViewOne, className: 'btn' },
        'Points in past 30 days  ',
        React.createElement(
          'span',
          { className: 'fa fa-sort-desc' },
          ' '
        )
      ),
      ' ',
      React.createElement(
        'button',
        { onClick: this.toggleViewTwo, className: 'btn' },
        ' All time points  ',
        React.createElement(
          'span',
          { className: 'fa fa-sort-desc' },
          ' '
        ),
        ' '
      ),
      ' ',
      React.createElement(
        'h1',
        null,
        ' freeCodeCamp  ',
        React.createElement(
          'span',
          { className: 'fa fa-free-code-camp' },
          ' '
        ),
        ' '
      ),
      ' ',
      React.createElement('hr', null),
      ' ',
      React.createElement(
        'div',
        { className: 'table-responsive' },
        '  ',
        React.createElement(
          'table',
          { className: 'table' },
          ' ',
          React.createElement(
            'thead',
            null,
            ' ',
            React.createElement(
              'tr',
              null,
              ' ',
              React.createElement(
                'th',
                null,
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '80px' }, className: 'text-center' },
                  ' # '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '600px' } },
                  ' Camper name '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '400px' }, className: 'text-center' },
                  ' Points in last month '
                ),
                ' ',
                React.createElement(
                  'td',
                  { style: { width: '400px' }, className: 'text-center' },
                  ' All time points '
                ),
                ' '
              ),
              ' '
            ),
            ' '
          ),
          ' ',
          React.createElement(
            'tbody',
            null,
            '  ',
            React.createElement(Map, { data: this.state[this.state.toggle] })
          ),
          ' '
        ),
        ' '
      ),
      ' '
    );
  }
});
//{<Tbody data={this.state}
/*                           
 --------------------------------------------------------------------------                                                                        */
var Map = React.createClass({
  displayName: 'Map',

  render: function render() {
    var rows = this.props.data.map(function (row, index) {
      return React.createElement(Tbody, { rank: index + 1, data: row });
    });

    return React.createElement(
      'tbody',
      { id: 'stripe' },
      rows
    );
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
var Tbody = React.createClass({
  displayName: 'Tbody',

  render: function render() {
    return React.createElement(
      'div',
      null,
      ' ',
      /*<h1>{this.props.data.username}</h1>*/React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          { style: { width: '80px' }, className: 'text-center' },
          this.props.rank + '.'
        ),
        React.createElement(
          'td',
          { style: { width: '600px' } },
          React.createElement(
            'a',
            { target: '_blank', href: 'http://freecodecamp.com/' + this.props.data.username },
            React.createElement('img', { src: this.props.data.img }),
            '   ',
            React.createElement(
              'span',
              null,
              this.props.data.username
            )
          )
        ),
        React.createElement(
          'td',
          { id: 'recent', className: 'text-center' },
          this.props.data.recent
        ),
        React.createElement(
          'td',
          { id: 'all', className: 'text-center' },
          this.props.data.alltime
        )
      ),
      ' '
    );
    //console.log(JSON.stringify(this.props));*/
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
ReactDOM.render(React.createElement(Leaderboard, null), document.getElementById('freeCodeCamp'));
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(161deg, #006401 0%, #FCFFEE 100%);
  background-attachment: fixed;
  color: #502d17;
  margin-left: 20px;
  margin-right: 20px;
}

button {
  margin: 5px;
  background-image: -webkit-linear-gradient(#006401, #FCFFEE);
  background-attachment: fixed;
  color: #FCFFEE;
  box-shadow: inset -1px -3px 10px 1px #515151;
  margin-bottom: 20px;
}

button:active {
  transform: translate(0, 3px);
  box-shadow: none;
  text-decoration: none;
  outline: none;
}
button:hover, button:active, button:visited {
  text-decoration: none;
  outline: none;
}

h6 {
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
}

h1 {
  color: rgba(245, 245, 245, 0.5);
  margin-left: 5px;
}

.fa-free-code-camp {
  font-size: 1em;
  color: rgba(245, 245, 245, 0.7);
}

table, td {
  border: 1px solid grey;
  table-layout: fixed;
}

tbody>div:nth-child(even){
  background-color: rgba(0, 100, 1, 0.5);
}

tbody>div:nth-child(odd) {
  background-color: rgba(0, 100, 1, 0.3);
}

img {
  border-radius: 100%;
  height: 60px;
}

a {
  text-decoration: none;
  color: #502d17;
}

#all {
  max-width: 280px;
  min-width: 280px;
}

#recent {
  max-width: 280px;
  min-width: 280px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="freeCodeCamp"></div>

    补充一点，虽然上述方法有效，但我认为您的 JavaScript 会生成无效的 HTML，因为我认为 div 不允许在 tbody 包装 tr 元素中作为子元素。如果这是您自己的代码，您可以将其更新为在 table 元素内使用多个 tbody 兄弟姐妹，每个兄弟姐妹都包含 tr 元素，而不是使用 div 包装 tr 元素的嵌套 tbody 元素。如果这不是你自己的代码，而是你从 freeCodeCamp 得到的代码，我会考虑切换代码营。

    【讨论】：

      【解决方案2】：

      您的表格标记无效。您的行不应包含在 div 中。 nth-child 在这种情况下不起作用的原因是它只能遍历兄弟元素（https://www.w3.org/TR/css3-selectors/#nth-child-pseudo）。

      删除排行榜渲染功能中的包装 div，它应该可以正常工作。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2023-04-03
        • 2014-04-09
        • 2012-09-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode