04-css selector定位元素
CSS选择器用于选择页面中的特定元素,以便应用样式。以下是一些常用的CSS选择器及其使用示例:
- 类选择器(Class Selector): 选择具有指定类的所有元素。
.my-class {
color: red;
}
- ID选择器(ID Selector): 选择具有指定ID的单个元素。
#my-id {
color: blue;
}
- 元素选择器(Element Selector): 选择指定类型的所有元素。
p {
font-size: 16px;
}
- 属性选择器(Attribute Selector): 选择包含指定属性的所有元素。
input[type="text"] {
background-color: yellow;
}
- 伪类选择器(Pseudo-class Selector): 选择处于特定状态的元素。
a:hover {
text-decoration: underline;
}
- 伪元素选择器(Pseudo-element Selector): 选择元素的一部分(如首字母、前缀或后缀)。
p::first-letter {
font-size: 200%;
}
- 子代选择器(Child Selector): 选择指定父元素的直接子元素。
div > p {
color: green;
}
- 相邻选择器(Adjacent Sibling Selector): 选择紧跟在另一个元素后的元素。
h1 + p {
margin-top: 0;
}
- 后代选择器(Descendant Selector): 选择指定父元素的后代(不仅限于直接子元素)。
div p {
color: purple;
}
- 通配选择器(Universal Selector): 选择所有元素。
* {
margin: 0;
padding: 0;
}
- 组选择器(Grouping Selector): 将选择器组合在一起。
h1, h2, h3 {
font-family: Arial, sans-serif;
}
使用这些选择器可以精确控制页面中元素的样式。
评论已关闭