CSS3带来了许多新的选择器,使得开发者可以更方便地选择元素进行样式的定义。这些选择器包括:1. 属性选择器 2. 伪类选择器 3. 伪元素选择器 4. 相邻兄弟选择器 5. 通用兄弟选择器 属性选择...
CSS3带来了许多新的选择器,使得开发者可以更方便地选择元素进行样式的定义。这些选择器包括:
1. 属性选择器 2. 伪类选择器 3. 伪元素选择器 4. 相邻兄弟选择器 5. 通用兄弟选择器
属性选择器可以根据元素的属性选择进行样式定义。例如:
/* 选择所有拥有title属性的元素 */
[title] {
color: blue;
}
/* 选择所有title属性值为"hello"的元素 */
[title="hello"] {
color: red;
} 伪类选择器用于选择元素的状态。例如:
/* 选择所有未被访问过的链接 */
a:link {
color: blue;
}
/* 选择所有被访问过的链接 */
a:visited {
color: purple;
} 伪元素选择器用于选择元素的子元素或特定的状态。例如:
/* 选择所有元素中的第一个子元素 */
:first-child {
font-weight: bold;
}
/* 选择元素中的第一个字符 */
::first-letter {
font-size: 2em;
} 相邻兄弟选择器用于选择相邻元素。例如:
/* 选择紧接着在p元素后面的第一个div元素 */
p + div {
color: red;
} 通用兄弟选择器用于选择所有在一个元素之后的兄弟元素。例如:
/* 选择在p元素之后的所有div元素 */
p ~ div {
color: blue;
} 以上是CSS3中新增的选择器,它们可以方便地选择元素进行样式定义,使得开发者在设计页面时更加得心应手。