CSS3选择器有多种类型,它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型,并提供具体的代码示例。
元素选择器:使用元素名称作为选择器,此处以p元素为例:
p { color: red; }
类选择器:使用类名作为选择器,以.开头,此处以class为example的元素为例:
.example { font-size: 16px; }
ID选择器:使用ID作为选择器,以#开头,此处以id为title的元素为例:
立即学习“前端免费学习笔记(深入)”;
#title { font-weight: bold; }
[attr]:选择具有指定属性的元素,此处以具有data属性的元素为例:
[data] { background-color: yellow; }
[attr=value]:选择具有指定属性和值的元素,此处以data属性值为example的元素为例:
[data="example"] { color: blue; }
[attr^=value]:选择具有以指定值开头的属性值的元素,此处以data属性值以"test"开头的元素为例:
[data^="test"] { text-decoration: underline; }
:nth-child(n):选择父元素的第n个子元素,此处以父元素的第3个子元素为例:
.parent :nth-child(3) { background-color: green; }
:first-child:选择父元素的第一个子元素,此处以父元素的第一个子元素为例:
.parent :first-child { font-style: italic; }
:hover:选择鼠标悬停在元素上的状态,此处以元素悬停时改变背景颜色为例:
.example:hover { background-color: orange; }
:active:选择元素被激活时的状态,此处以元素被点击时改变文字颜色为例:
.example:active { color: purple; }
以上是CSS3选择器的部分类型和代码示例,它们可以帮助开发者更灵活地选择和控制页面中的元素样式。通过熟练掌握这些选择器,可以有效提高页面的开发效率和用户体验。