css中nth的用法是什么

说实话,这第n个选择器用起来相当有趣,当时我费了好大劲才搞清楚它们。
让我们来分解一下:
1 第 n 个孩子(n) 这很容易理解。
当选择爸爸的第n个孩子时,它是什么类型并不重要。
例如,nth-child(2 ) 选择父亲的第二个儿子。
如果第二个是h1 标签而不是p,那就没用了。
参数可以是数字,例如 2 、偶数/奇数或公式 2 n+1 我尝试过 nth-child(2 n),它选择偶数位置,以及 nth-child(2 n+1 ),它选择奇数位置。
当我 2 01 0 年左右写网页时,这确实很有用。

2 .第n个最后一个孩子(n) 这是从尾部开始算的。
nth-last-child(2 ),这是倒数第二个孩子。
就像 :nth-child 一样,它必须是 p 标签。
例如,ul 中的倒数第二个字符是 li,而不是 p,所以这是行不通的。
公式的使用也是如此。

3 .nth-of-type(n) 这一篇不一样,讲的是同类兄弟。
例如,如果文档中有p:nth-of-type(2 ),那么无论中间插入什么标签,它都将是所有p中的第二个。
当时正在写新闻列表,用这个真是太神奇了,即使div嵌套了也不会有什么效果。

4 .nth-last-of-type(n) 从同类开始倒数。
p:nth-last-of-type(2 ),倒数第二个 p。
这特别适合清除浮动,例如倒数第二个div。
如果样式能固定就完美了。
IE8 以下确实不支持。
我在写兼容性的时候很头疼。

注意式中n从0开始,2 n为偶数,2 n+1 为奇数。
我在面试时被问到这个问题,差点就被卡住了。
2 01 5 年左右做响应式布局的时候,经常使用nth-child(3 n)来跳过几个元素,效率很高。

css有几种引入方式

嗯...引入CSS有四种方式...
首先...导入...也就是...就是...你独立打开CSS文件...你使用@import...然后把它塞进HTML...像这样...@import "mystyle.css";...对...像这样...
但是...这个导入样式...有一个问题...就是你先安装整个网页...然后...你安装CSS...如果网页很大...你会看到不一样的样式...整齐首先...然后样式会出现...所有这些...它会闪烁...非常烦人...
所以...现在...每个人都不使用这种导入样式...
但之后...链接类型...这...将CSS...保存为单独的文件...例如my.css...然后在HTML中使用 <link>...链接到它...就像这样... ...对...
链接样式A 这...是最现在用...因为...它把内容和展示分开...方便审查...和维护...而且代码看起来...顺眼...
然后...内联样式...这个...就是...你直接把CSS写到HTML标签的style属性里...像这样... 测试信息