醉美水芙蓉 发表于 2023-8-29 20:27
红影真会玩！
谢谢水芙蓉美女，正好没什么事，赶紧学习代码了{:4_173:}
马黑黑 发表于 2023-8-29 20:36
你使用 nth-child 来设定 span 兄弟元素，不建议。要想精准设置一组兄弟元素的第n个的样式，请使用 nth-o ...
原来是这样，学习了。等一会空了我去修改。
“#papa span 的表达，是定义 #papa 之下所有子子孙孙辈的 span 元素，如果不能确保 #papa 下到底有没有其他的 span 元素，请用 #papa > span 来指定 span 元素是 #papa 的第一代子元素”
黑黑说得太对了，我已经发现这个设置对全屏按钮造成了影响，没办法，我把全屏给移出去了{:4_189:}
亦是金 发表于 2023-8-29 21:25
红影制作神速！学习了！
速度也不快啊，为了加入以前的效果，做了好半天的。那个Sailing做得快，几乎没费劲就做完了{:4_173:}
红影 发表于 2023-8-29 21:40
原来是这样，学习了。等一会空了我去修改。
“#papa span 的表达，是定义 #papa 之下所有子子孙孙辈的 ...
但 nth-child 的顺序就不一定对了，结果是那个全屏按钮在动
红影 发表于 2023-8-29 21:36
不是，这个是css里的，和js无关呢。
插件会使用 span 标签，所以，好的做法是给自己的 span 加 class 选择器：
<span class="aaa"></span>
<span class="aaa"></span>
<span class="aaa"></span>
CSS则给它们逐一定义：
.aaa:nth-of-type(1) {...}
.aaa:nth-of-type(2) {...}
.aaa:nth-of-type(3) {...}
这样就不会跟可能存在的 span 标签冲突
马黑黑 发表于 2023-8-29 21:51
但 nth-child 的顺序就不一定对了，结果是那个全屏按钮在动
原来如此，这才是为什么那个小球不动的原因吧{:4_173:}
红影 发表于 2023-8-29 22:30
原来如此，这才是为什么那个小球不动的原因吧
给span加class最好
马黑黑 发表于 2023-8-29 21:54
插件会使用 span 标签，所以，好的做法是给自己的 span 加 class 选择器：
已经改好了，现在不影响全屏按钮了，每一个也都能随意调位置了，之前有一个小球出问题，怎么也弄不动{:4_173:}
马黑黑 发表于 2023-8-29 22:36
给span加class最好
看样子只有动手做帖子，才能遇到问题，也才能学到新东西啊。现在弄明白了，谢谢黑黑{:4_187:}
红影 发表于 2023-8-29 22:41
已经改好了，现在不影响全屏按钮了，每一个也都能随意调位置了，之前有一个小球出问题，怎么也弄不动{:4_ ...
看到了
马黑黑 发表于 2023-8-29 21:54
插件会使用 span 标签，所以，好的做法是给自己的 span 加 class 选择器：
是的，自己用自己的span才是对的。
红影 发表于 2023-8-29 22:42
看样子只有动手做帖子，才能遇到问题，也才能学到新东西啊。现在弄明白了，谢谢黑黑
实践出真知，实践过程中，知道为什么做得对，更应知道为什么做不对。
红影 发表于 2023-8-29 22:43
是的，自己用自己的span才是对的。
我过去之所以那么用过，是心中有数，东西都是自己的，不会产生冲突。
马黑黑 发表于 2023-8-29 22:44
实践出真知，实践过程中，知道为什么做得对，更应知道为什么做不对。
还好这个效果正好影响了全屏，否则还不知道不能这样做span呢{:4_173:}
马黑黑 发表于 2023-8-29 22:46
我过去之所以那么用过，是心中有数，东西都是自己的，不会产生冲突。
我只是把过去的直接搬来了，根本没多想，其实也不懂的缘故{:4_173:}
马黑黑 发表于 2023-8-29 22:42
看到了
谢谢黑黑，这个帖子里学到的东西我得好好记着了{:4_204:}
本帖最后由 马黑黑 于 2023-8-29 23:16 编辑
红影 发表于 2023-8-29 23:01
谢谢黑黑，这个帖子里学到的东西我得好好记着了
其实，很多人都不太能搞懂 nth-child 的。nth-child 是基于节点的，比方讲，下面的三个 span ：
<div id="mydiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
这样的 CSS 是可以定义 <span>2</span> 的文本颜色的：
#mydiv > span:nth-child(2) {
color: red;
}
但是，如果出现其他标签在这三个 span 之间，例如：
<div id="mydiv">
<span>1</span>
<h3>标题</h3>
<span>2</span>
<span>3</span>
</div>
上面的 CSS 中 nth-child(2) 就会失效，因为 nth-child 基于节点，现在，#mydiv 的第二个节点是 h3 而不是
span ，h3的文本不是红色， <span>2</span> 的文本也不是（它现在是第三个节点）。
而 nth-of-type 是基于兄弟元素的，大家都是 span 的话，就是兄弟，h3 不是兄弟，所以下面对 span 的文本颜色的定义，总是有效的，第二个 span 的文本是红色：
#div > span:nth-of-type(2) {
color: red;
}
一个基于节点，另一个基于兄弟元素，这就是 nth-child 和 nth-of-type 的区别。从 type 也可以看出，它是类型的意思，就是指同一种标签。
当然，当需要这么定义标签属性时，好的习惯是，给标签定义 class 选择器，通过class来设定它们。
红影 发表于 2023-8-29 22:58
还好这个效果正好影响了全屏，否则还不知道不能这样做span呢
不单单 span，这些规矩适用于所有的标签
马黑黑 发表于 2023-8-29 23:14
其实，很多人都不太能搞懂 nth-child 的。nth-child 是基于节点的，比方讲，下面的三个 span ：
这个知识记得黑黑讲过的，再来学习一下真好。谢谢黑黑{:4_187:}
马黑黑 发表于 2023-8-29 23:17
不单单 span，这些规矩适用于所有的标签
真好，又黑黑大神在，出点问题倒是能学习到更多东西呢{:4_204:}