没有hidden属性的这些行按奇偶变色CSS

君望永远 2016-02-19 04:13:26

table.menuTable tr td table#tblKanri tr:not(.hidden):nth-child(even)]{
background-color:#E1EDF8
}
这句没用我就是想把没有hidden属性的这些行按奇偶变色这句CSS无效

...全文

199 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-02-20

打赏
举报

css没办法，用jquery吧


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
table#tblKanri tr {
    background-color: #f00;
}
table#tblKanri tr.even{
    background-color: #00f;
}
.hidden{
 display:none;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#tblKanri tr:not(.hidden):even").addClass("even");
});
</script>
<table id="tblKanri">
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr class="hidden"><td>hidden</td><td>hidden</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
</table>
 
</body>
</html>

君望永远 2016-02-19

打赏
举报

引用 2 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
table#tblKanri tr {
	background-color: #f00;
}
table#tblKanri tr:not(.hidden):nth-child(even){
	background-color: #00f;
}
</style>
</head>
<body>
<table id="tblKanri">
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr class="hidden"><td>hidden</td><td>hidden</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
</table>

</body>
</html>

还是不行啊

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
table#tblKanri tr {
    background-color: #f00;
}
table#tblKanri tr:not(.hidden):nth-child(even){
    background-color: #00f;
}
.hidden{
 display:none;
}
</style>
</head>
<body>
<table id="tblKanri">
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr class="hidden"><td>hidden</td><td>hidden</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
    <tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
</table>
 
</body>
</html>

运行一下你就明白我的问题了

天际的海浪 2016-02-19

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
table#tblKanri tr {
	background-color: #f00;
}
table#tblKanri tr:not(.hidden):nth-child(even){
	background-color: #00f;
}
</style>
</head>
<body>
<table id="tblKanri">
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr class="hidden"><td>hidden</td><td>hidden</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
	<tr><td>bbbbbbb</td><td>cccccccccc</td></tr>
</table>

</body>
</html>

天际的海浪 2016-02-19