css 行选择器 |css 高度充满屏幕

p:nth-of-type(n) {
/* 样式 */
}

“:nth-of-type(n)”表示选择第n个特定类型的元素，而p表示选择所有p标签。这个选择器适用于列而非行时，可以使用:nth-child(n)。

p:nth-child(n) {
/* 样式 */
}

在这里，:nth-child(n)表示选择第n个子元素，而在p前面加上一个“>”符号，表示只有父元素是p的才会被选择。

parent >p:nth-child(n) {
/* 样式 */
}

行选择器可以更细化地控制文本样式。下面是一些例子，可以使一组行有所不同：

/* 选择偶数行 */
p:nth-of-type(2n) {
background-color: #f2f2f2;
}
/* 选择奇数行 */
p:nth-of-type(2n+1) {
background-color: #ccc;
}
/* 选择第一个行 */
p:first-of-type {
font-weight: bold;
}
/* 选择最后一行 */
p:last-of-type {
font-style: italic;
}

以上的代码片段选择了不同的行，使它们看起来更鲜明、独特。

行选择器经常与其他选择器组合使用。例如，可以将一个强调文本应用于列表中每行的第一个单词，如下代码：

li p:first-child {
font-weight: bold;
}

这告诉CSS找到每个li中的第一个段落子元素，然后将其字体加粗。

总而言之，使用行选择器可以让您更好地控制文本外观和排版。无论您是在创建网页还是印刷文档，了解CSS行选择器都是一种非常有用的技巧。