css3选择器类型有哪些
CSS3选择器类型有以下几种:
-
元素选择器(Element Selector):通过元素名称来选择元素,例如
p
选择所有<p>
元素。 -
类选择器(Class Selector):通过类名来选择元素,以
.
开头,例如.container
选择所有类名为container
的元素。 -
ID选择器(ID Selector):通过元素的ID属性来选择元素,以
#
开头,例如#header
选择ID为header
的元素。 -
通配选择器(Universal Selector):选择所有元素,使用
*
表示。 -
属性选择器(Attribute Selector):通过元素的属性来选择元素,例如
[type="text"]
选择所有type
属性值为text
的元素。 -
后代选择器(Descendant Selector):选择某个元素的后代元素,使用空格分隔,例如
.container p
选择所有位于类名为container
的元素内的<p>
元素。 -
直接子元素选择器(Child Selector):选择某个元素的直接子元素,使用
>
分隔,例如.container > p
选择所有位于类名为container
的元素下的直接子级<p>
元素。 -
兄弟选择器(Adjacent Sibling Selector):选择某个元素的下一个兄弟元素,使用
+
分隔,例如.container + p
选择位于类名为container
的元素后面的第一个兄弟<p>
元素。 -
伪类选择器(Pseudo-class Selector):选择元素的特定状态或位置,以
:
开头,例如:hover
选择鼠标悬停在元素上的状态。 -
伪元素选择器(Pseudo-element Selector):选择元素的特定部分,以
::
开头,例如::before
选择元素的前面插入的内容。 -
否定选择器(Negation Selector):选择不符合指定条件的元素,以
:not()
包裹条件,例如:not(.container)
选择不具有类名为container
的元素。 -
状态选择器(State Selector):选择元素的特定状态,例如
:checked
选择已选中的复选框或单选按钮。 -
UI元素状态选择器(UI Element State Selector):选择元素的特定用户界面状态,例如
:enabled
选择可用的表单元素。 -
结构性伪类选择器(Structural Pseudo-class Selector):选择元素的特定位置或结构,例如
:first-child
选择父元素下的第一个子元素。 -
网格布局选择器(Grid Layout Selector):选择网格布局中的元素,例如
:nth-column()
选择网格布局中的第n列。
相关问答