[分享]css3新增伪类叙述正确的有

CSS3是CSS的最新版本，它引入了一系列新的伪类，使我们可以更好地处理网页元素的样式和交互。下面就让我们来一一了解这些新增伪类。/ 1. :nthchild(n) / p:nthchild(2) {...

CSS3是CSS的最新版本，它引入了一系列新的伪类，使我们可以更好地处理网页元素的样式和交互。下面就让我们来一一了解这些新增伪类。

/* 1. :nth-child(n) */
p:nth-child(2) {
    color: red;
}

/* 匹配其父元素的第二个子元素，即所有p标签中位置为2的元素变成红色。 */

/* 2. :nth-of-type(n) */
p:nth-of-type(2) {
    font-weight: bold;
}

/* 匹配其父元素中第二个p标签，即所有p标签中位置为2的元素变为加粗字体。 */

/* 3. :last-child */
p:last-child {
    border-bottom: 1px solid black;
}

/* 匹配其父元素中最后一个子元素，即所有p标签中最后一个元素下方加上一条黑色的边框线。 */

/* 4. :first-of-type */
p:first-of-type {
    text-indent: 2em;
}

/* 匹配其父元素中第一个p标签，即所有p标签中第一个元素缩进2个字符。 */

/* 5. :empty */
p:empty {
    display: none;
}

/* 匹配内容为空的p标签，即所有空的p标签都隐藏。 */

/* 6. :not() */
p:not(.special) {
    color: green;
}

/* 匹配除了带有class="special"的p标签以外的所有p标签，即不带有特殊样式的p标签字体都变成绿色。 */

/* 7. :focus */
input:focus {
    outline: none;
    border: 2px solid blue;
}

/* 匹配当前获得焦点的input标签，即输入框在获得焦点的时候去掉原有的边框并增加一个2px蓝色边框。 */ 

以上就是CSS3新增的一些伪类。它们为我们提供了更多的选择，使我们能够更好地实现页面的样式和交互效果。在实际开发中，我们可以根据实际需求灵活运用这些伪类，达到更好的效果。