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列。