css3增加的选择器

CSS3的出现给网页设计师带来了很多好处，其中之一就是新增了很多选择器。下面介绍一些常用的CSS3选择器。

/* 属性选择器 */input[type="text"] {
    color: blue;
}
/* 伪类选择器 */a:hover {
    text-decoration: underline;
}
/* 相邻兄弟选择器 */h1 + p {
    font-size: 1.2em;
}
/* 通用兄弟选择器 */h2 ~ p {
    margin-left: 20px;
}
/* 伪元素选择器 */p::after {
    content: " - ";
}
    

上面五个选择器分别是属性选择器、伪类选择器、相邻兄弟选择器、通用兄弟选择器和伪元素选择器。

属性选择器可以根据某个属性的值来选择元素，比如上面的例子是选择所有type为text的input元素并设置颜色为蓝色。

伪类选择器可以根据元素的状态来选择元素，比如上面的例子是选择鼠标滑过时的链接并设置下划线。

相邻兄弟选择器和通用兄弟选择器都是兄弟元素选择器的一种，可以选择指定兄弟元素。相邻兄弟选择器只能选择后一个兄弟元素，而通用兄弟选择器可以选择后面所有兄弟元素。上面的例子是选择h1元素后面的第一个p元素设置字体大小，和选择h2后面所有的p元素并给它们添加20px的左边距。

伪元素选择器可以在元素的内部或外部创建虚拟的元素，常用的有before和after。上面的例子是在每个p元素后面添加“ - ”。

以上是常用的五种CSS3选择器，可以根据自己的需要选择合适的来设计网页。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！