CSS常见的选择器
- CSS
CSS
CSS (Cascading Style Sheets)用于定义网页样式,包括字体、颜色、布局等,在CSS中,选择器用于指定哪些元素将被应用样式,以下是一些常见的CSS选择器:
-
元素选择器(Type Selector):
- 直接通过元素名称来选择,如
p,div,h1等。
- 直接通过元素名称来选择,如
-
类选择器(Class Selector):
- 通过元素的class属性来选择,用一个点
.来表示,如.classname。
- 通过元素的class属性来选择,用一个点
-
ID选择器(ID Selector):
- 通过元素的ID来选择,只能用于一个元素,用井号
#来表示,如#idname。
- 通过元素的ID来选择,只能用于一个元素,用井号
-
属性选择器(Attribute Selector):
- 选择带有特定属性或属性值的元素,例如
[type="text"]。
- 选择带有特定属性或属性值的元素,例如
-
伪类选择器(Pseudo-class Selector):
- 用来选择在特定状态下的元素,如元素被悬停时或者被点击时,例如
:hover,:active。
- 用来选择在特定状态下的元素,如元素被悬停时或者被点击时,例如
-
伪元素选择器(Pseudo-element Selector):
- 用于选择元素的某个部分,如元素的第一行或第一个字,例如
::first-line,::before。
- 用于选择元素的某个部分,如元素的第一行或第一个字,例如
-
后代选择器(Descendant Selector):
- 选择所有嵌套在特定元素内的元素,用空格分隔,例如
div p。
- 选择所有嵌套在特定元素内的元素,用空格分隔,例如
-
子元素选择器(Child Selector):
- 选择直接嵌套在特定元素内的元素,用大于号
>表示,例如ul > li。
- 选择直接嵌套在特定元素内的元素,用大于号
-
相邻兄弟选择器(Adjacent Sibling Selector):
- 选择紧跟在特定元素后的元素,且两者有相同父元素,用加号
+表示,例如h1 + p。
- 选择紧跟在特定元素后的元素,且两者有相同父元素,用加号
-
通用兄弟选择器(General Sibling Selector):
- 选择所有和特定元素有共同父元素的兄弟元素,用波浪号
~表示,例如h1 ~ p。
- 选择所有和特定元素有共同父元素的兄弟元素,用波浪号
-
通配符选择器(Universal Selector):
- 使用一个星号
*选择所有元素,例如*。
- 使用一个星号
-
分组选择器(Grouping Selector):
- 通过逗号分隔,选择多个元素应用相同的样式,例如
div, p, h1。
- 通过逗号分隔,选择多个元素应用相同的样式,例如
每种选择器都有其特定的使用场景和优先级,它们可以单独使用,也可以组合使用以达到更具体的选择目的。理解并掌握这些选择器对于编写有效的CSS代码至关重要。