如何根据CSS的任意数字选择特定类后的第n个兄弟？
我试图像这样创建一个页面：
当然这只是我项目的总结。
我希望在class="s1"
(first & 4n+1'th) div with class="s2" in 'white' background
(first & 4n+2'th) div with class="s2" in 'black' background
(first & 4n+3'th) div with class="s2" in 'black' background
(first & 4n+4'th) div with class="s2" in 'white' background
-----------------------------------------------------------
every div with class="s1"
-----------------------------------------------------------
4n+1'th div with class="s2" | 4n+2'th div with class="s2"
(White background) | (Black background)
-----------------------------------------------------------
4n+3'th div with class="s2" | 4n+4'th div with class="s2"
(Black background) | (White background)
-----------------------------------------------------------
并为class="s1"的每个div重复此循环。
我也插入了我的简单代码。你在我的代码片段中看到一些带有class="s2"的div
有一个错误的浮动侧，其中一些在一行中具有相同的颜色或
div后面的第一个div class="s1"以黑色背景开始。
body {
background: gray;
color: blue;
position: relative;
}
* {
text-align: center;
vertical-align: middle;
margin: auto;
}
div {
height: 50px;
display: table;
margin: auto;
margin-bottom: 10px;
}
.s1 {
width: 100%;
clear: both;
background: lightgreen;
}
.s2 {
width: 50%;
}
a,
h2 {
display: table-cell;
height: 100%;
}
/*----------------------------------------------------*/
/*-------mistakes in float&color under second S1------*/
/*-------mistakes in float&color under third S1------*/
/*----------------------------------------------------*/
.s2:nth-child(odd) {
float: right;
}
.s2:nth-child(even) {
float: left;
}
.s2:nth-of-type(4n+4) {
background: black;
}
.s2:nth-of-type(4n+3) {
background: black;
}
.s2:nth-of-type(4n+2) {
background: white;
}
.s2:nth-of-type(4n+1) {
background: white;
}
/*----------------------------------------------------*/<div class="s1">
<h2>first S1</h2></div>
<div class="s2"><a>S2-1a</a></div>
<div class="s2"><a>S2-2a</a></div>
<div class="s2"><a>S2-3a</a></div>
<div class="s2"><a>S2-4a</a></div>
<div class="s2"><a>S2-5a</a></div>
<div class="s2"><a>S2-6a</a></div>
<div class="s2"><a>S2-7a</a></div>
<div class="s2"><a>S2-8a</a></div>
<div class="s1"><h2>second S1</h2>
</div>
<div class="s2"><a>S2-1b</a>
</div>
<div class="s2"><a>S2-2b</a>
</div>
<div class="s2"><a>S2-3b</a>
</div>
<div class="s2"><a>S2-4b</a>
</div>
<div class="s2"><a>S2-5b</a>
</div>
<div class="s1">
<h2>third S1</h2>
</div>
<div class="s2"><a>S2-1c</a>
</div>
<div class="s2"><a>S2-2c</a>
</div>
<div class="s2"><a>S2-3c</a>
</div>
<div class="s2"><a>S2-4c</a>
</div>
2 个答案:
答案 0 :(得分：3)
如果我理解你的问题..
使用<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
// Load the Visualization API and the chart packages.
google.load('visualization', '1.1', {
packages: ['line', 'bar', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the charts, passes in the data and
// draws them.
function drawChart() {
// Create the data table.
var BarData = new google.visualization.arrayToDataTable([
['', 'Customer', 'Segment Avg'],
['TTM Sales', 4, 2],
['TTM Orders', 5, 3],
['TTM Categories', 7, 4]
]);
// Create the data table.
var LineData = new google.visualization.arrayToDataTable([
['Year', 'Customer', 'Segment Avg'],
['2011', 4, 5],
['2012', 5, 3],
['2013', 4, 2]
]);
// Set chart options
var BarOptions = {
chart: {
title: 'Performance',
},
width: 900,
height: 500
};
// Set chart options
var LineOptions = {
chart: {
title: 'Sales History'
},
width: 900,
height: 500
};
// Instantiate and draw our chart, passing in some options.
var BarChart = new google.charts.Bar(document.getElementById(
'bar_chart'));
BarChart.draw(BarData, BarOptions);
var LineChart = new google.charts.Line(document.getElementById(
'line_chart'));
LineChart.draw(LineData, LineOptions);
};
</script>
<title>Test Chart Page</title>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="bar_chart"></div>
<div id="line_chart"></div>
</body>
</html>
选择器。 http://www.w3schools.com/cssref/sel_element_pluss.asp
element +答案 1 :(得分：0)
nth-of-class不存在，而nth-of-type会将它们全部定位，因此，您需要将.s2包装在div中。然后，您可以使用.s1+div>div
body {
background: gray;
color: blue;
position: relative;
}
* {
text-align: center;
vertical-align: middle;
margin: auto;
}
div {
height: 50px;
display: table;
margin: auto;
margin-bottom: 10px;
}
.s1+div {
display: block;
}
.s1 {
width: 100%;
clear: both;
background: lightgreen;
}
.s1+div>div {
width: 50%;
}
a, h2 {
display: table-cell;
height: 100%;
}
/*----------------------------------------------------*/
/*-------mistakes in float&color under second S1------*/
/*-------mistakes in float&color under third S1------*/
/*----------------------------------------------------*/
.s1+div>div:nth-child(odd) {
float: left;
}
.s1+div>div:nth-child(even) {
float: right;
}
.s1+div>div:nth-of-type(4n+1),
.s1+div>div:nth-of-type(4n+4) {
background: white;
}
.s1+div>div:nth-of-type(4n+2),
.s1+div>div:nth-of-type(4n+3) {
background: black;
}
/*----------------------------------------------------*/<div class="s1">
<h2>first S1</h2>
</div>
<div>
<div><a>S2-1a</a></div>
<div><a>S2-2a</a></div>
<div><a>S2-3a</a></div>
<div><a>S2-4a</a></div>
<div><a>S2-5a</a></div>
<div><a>S2-6a</a></div>
<div><a>S2-7a</a></div>
<div><a>S2-8a</a></div>
</div>
<div class="s1">
<h2>second S1</h2>
</div>
<div>
<div><a>S2-1b</a></div>
<div><a>S2-2b</a></div>
<div><a>S2-3b</a></div>
<div><a>S2-4b</a></div>
<div><a>S2-5b</a></div>
</div>
<div class="s1">
<h2>third S1</h2>
</div>
<div>
<div><a>S2-1c</a></div>
<div><a>S2-2c</a></div>
<div><a>S2-3c</a></div>
<div><a>S2-4c</a></div>
</div>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？