<
meta
charset
=
"
utf-8
"
/>
<
meta
name
=
"
viewport
"
content
=
"
width=device-width, initial-scale=1
"
>
<
title
>
</
title
>
<
style
type
=
"
text/css
"
>
#nth-test div:nth-child(-n + 4)
{
background-color
:
red
;
</
style
>
</
head
>
<
div
id
=
"
nth-test
"
>
<
div
>
1
</
div
>
<
div
>
2
</
div
>
<
div
>
3
</
div
>
<
div
>
4
</
div
>
<
div
>
5
</
div
>
<
div
>
6
</
div
>
<
div
>
7
</
div
>
</
div
>
</
body
>
</
html
>
选前四个：
#nth-test div:nth-child(-n + 4) {
background-color: red;
选弟3个往后的：
#nth-test div:nth-child(n + 3) {
background-color: red;
选偶数元素：
#nth-test div:nth-child(2n) {
background-color: red;
选基数元素：
#nth-test div:nth-child(2n+1) {
background-color: red;
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #nth-test div:nth-child(-n + 4).
如：在项目中要实现如下效果
在三列布局中间加边框线，只使用border-right是不行的，三个div都会被选中，因此使用css选择器给前两个div进行添加样式，实现代码如下：
.totalShow > div:nth-child(-n+2) {
border-right: 1px solid #E4E7ED;
其中 >大于号代表只选择下一代子元素 (-n+2) 代表选择前两个。
针对nth-ch
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-...
这样的业务还是会有的 特别的一些动态数据，因为前面的几个数量不定，但是后面几个是固定的这个时候，就需要我们能不能固定选中后面几个元素了
比如。选中后面三个元素。 其实我们可以通过css来实现了 很简单的 核心代码就是
nth-last-child(n) 这个伪类选择器的运用
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="
要实现几个 `div` 盒子的拖曳，并且它们之间互不影响，可以使用 JavaScript 和 CSS 来完成。
首先，在 HTML 中为每个 `div` 元素添加一个唯一的标识符（ID），这样可以通过 JavaScript 轻松地识别每个元素。
然后，使用 JavaScript 获取每个 `div` 元素，并为它们添加拖曳事件。可以使用 `mousedown`、`mousemove` 和 `mouseup` 事件来实现拖曳。当鼠标按下时，使用 `mousemove` 事件来跟踪鼠标移动，并相应地移动 `div` 元素。当鼠标抬起时，停止拖曳操作。
最后，为每个 `div` 元素添加 CSS 样式，使它们具有可拖曳性。可以使用 `position: absolute` 样式来将 `div` 元素从其默认的文档流中移除，并允许它们在页面上自由移动。
通过这种方法，可以实现几个 `div` 盒子的拖曳，并且它们之间互不影响。
