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

标签 html css reactjs

我尝试在 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 标记被拉入您的 codepen，我不确定这对 future 的用户有多大用处，但在您的 codepen 的上下文中，您的选择器是不正确的。

您的 tbody 不包含 tr sibling ，但每个 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>

Just to add, while the above works, I think your JavaScript generates invalid HTML to begin with as I think a div is not allowed as a child inside a tbody wrapping tr elements. If this is your own code, you can update it to use multiple tbody siblings inside the table element, each containing tr elements, instead of nested tbody elements with a div wrapping tr elements. If this is not your own code but the code you got from freeCodeCamp, I would consider switching code camp.

关于html - 为什么我的斑马条纹 CSS 不适用于我的表格行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42626922/

上一篇：javascript - 显示一个div，如果表数据显示 "Unpaid"与Jquery

下一篇：javascript - Bootstrap 主题的模块化和可采纳性

相关文章：

java - 为什么这不适用于 ICS

jquery - 隐藏div时如何设置背景颜色

css - 删除父 div 的边框时，子 div 会丢失边距

reactjs - 导入 "TypeError: Cannot read property ' 包时出现错误 "React-Magnific-Popup"object' of undefined"

javascript - 分享在 native android/ios 中不起作用？

javascript - 基于数字渲染多个元素而不是通过数组映射

javascript - 从第三方服务器更改图像

html - 不同显示器上的页面格式

jquery - 鼠标移出时清除多边形

php - 我的 WP 博客中的图片在其他网站上不显示

©2024 IT工具网  联系我们