sup*_*234 1 html css css-selectors
这个问题涉及使用:nth-of-type(n)哪里n是最后一个元素或的约定:last-of-type.根据定义,两个提供的n是最后一个元素没有区别,所以在理论上要么应该工作.这是一些通用的示例代码(这显然不是真正的代码,但这个简单的东西足以作为演示):
<!DOCTYPE html>
<style type="text/css">
div:first-of-type { background-color: red; }
div:last-of-type { background-color: green; } /* or div:nth-of-type(n) for last element n*/
</style>
<html>
<div>Row 1</div>
<div>Row 2</div>
</html>
具有已知元素数量的场景中的典型约定是什么？如果只有两个元素怎么办？在这两种情况下,通常使用哪种伪选择器？
另外,一个不寻常的场景,编码器只能控制样式表和HTML,这种情况极不可能但技术上容易改变？或者这两者都属于个人偏好.
这主要是语义问题.
通常,您使用:first-child/:first-of-type并且:last-child/:last-of-type当您对第一个和最后一个元素(仅与其他第n个元素相比,或者与竞争:nth-of-type()规则不同)进行样式化时,您希望这些规则适用于第一个和最后一个元素,即使元素数量可以变化也是如此.
即使你事先知道了元素的数量,即使这个数字永远不会改变,:nth-of-type(X)其中X是元素的数量并不能立即明确它指的是"哪一个元素是最后一个"而不是一些任意的第X个元素:
div:nth-of-type(even) { background-color: yellow; }
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(12) { background-color: green; }
当然,这是非常主观的 - 你可能非常了解你的布局,你知道总会有完全X元素,所以上面的例子总是针对第一个和最后一个,你可能是唯一一个看到你的代码,所以对你来说并不重要.这就是我说这是语义问题的原因.(你可以放弃使用:nth-last-of-type(1)......但是你可以自己保存击键并使用它:last-of-type.)
唯一:nth-of-type(X)可能更好的情况是,如果您计划使用其他:nth-of-type()规则扩展此规则,每个规则对特定元素的样式与前两个不同:
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(2) { background-color: green; }
/* Added */
div:nth-of-type(3) { background-color: blue; }
换句话说,当您希望应用于第二个元素的规则("last")继续应用于第二个元素时,即使添加了第三个元素 - 并且您不希望该规则随后应用于第三个元素(当发生这种情况时,新的"last")元素 - 使用:nth-of-type(2),即使例如默认情况下只有2个元素出现在布局中.此时,您不再处理第一个/最后一个语义,但您(并且一直都在)处理第n个语义.
在这种情况下,它似乎没有必要再使用:nth-of-type(1)了:first-of-type,因为第一个元素将永远是第一,不管你有多少元素添加或从布局中删除.在这种情况下你使用哪一个确实取决于个人偏好 - 例如,我宁愿:nth-of-type(1)与其他规则保持一致,所以它看起来不像奇怪的那样:
div:first-of-type { background-color: red; } /* Looks out of place... */
div:nth-of-type(2) { background-color: green; } /* ... when every other element... */
div:nth-of-type(3) { background-color: blue; } /* ... is numbered */
另外,一个不寻常的场景,编码器只能控制样式表和HTML,这种情况极不可能但技术上容易改变？
实际上并非那么不寻常.如果HTML极不可能改变,那么布局可能不支持它,因此如果它确实发生了变化,它将无法继续正常工作.无论你使用的是第一个/最后一个还是第n个都不会产生太大的影响,所以我基于语义的选择建议仍然存在.
为了完整起见,还有一个额外的抓说到:first-child:不像:last-child,:only-child,:nth-child(),和所有基于类型的变种(的:*-of-type),:first-child在CSS2引入,因此一些很老的浏览器只支持不支持任何其余的.
在这个时代,您可能不必担心这一点,但如果您确实希望您的布局在非常旧的浏览器上正常降级,您可能会考虑使用:nth-child(1)它以使其在不受支持的浏览器上与所有其他:nth-child()规则一起失败,而不是而不是第一个元素的样式,其余的没有,这取决于你的布局可能看起来最丑或最坏的布局问题.