我在React应用程序here中尝试使用zebra条带化我的表格。但是，它没有得到应用。以下是相关的风格：
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 <span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points <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>
答案 0 :(得分：1)
由于您的HTML标记是在您的代码中引入的，我不确定这对未来用户有多大用处，但在您的代码库的上下文中，您的选择器不正确。
您的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 <span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points <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不允许作为子项元素。如果这是您自己的代码，您可以更新它以使用tbody元素中的多个table兄弟，每个元素包含tr个元素，而不是嵌套tbody元素{ {1}}包装div个元素。如果这不是您自己的代码，而是您从freeCodeCamp获得的代码，我会考虑切换代码阵营。
答案 1 :(得分：0)
您的表格标记无效。您的行不应包含在div中。 在这种情况下，nth-child不工作的原因是因为它只能遍历兄弟元素（https://www.w3.org/TR/css3-selectors/#nth-child-pseudo）。
在排行榜渲染功能中删除你的包装div，它应该可以正常工作。