温馨提示×

css3选择器类型有哪些

小亿
95
2023-07-10 12:18:54
栏目: 编程语言

CSS3选择器类型有以下几种:

  1. 元素选择器(Element Selector):通过元素名称来选择元素,例如p选择所有<p>元素。

  2. 类选择器(Class Selector):通过类名来选择元素,以.开头,例如.container选择所有类名为container的元素。

  3. ID选择器(ID Selector):通过元素的ID属性来选择元素,以#开头,例如#header选择ID为header的元素。

  4. 通配选择器(Universal Selector):选择所有元素,使用*表示。

  5. 属性选择器(Attribute Selector):通过元素的属性来选择元素,例如[type="text"]选择所有type属性值为text的元素。

  6. 后代选择器(Descendant Selector):选择某个元素的后代元素,使用空格分隔,例如.container p选择所有位于类名为container的元素内的<p>元素。

  7. 直接子元素选择器(Child Selector):选择某个元素的直接子元素,使用>分隔,例如.container > p选择所有位于类名为container的元素下的直接子级<p>元素。

  8. 兄弟选择器(Adjacent Sibling Selector):选择某个元素的下一个兄弟元素,使用+分隔,例如.container + p选择位于类名为container的元素后面的第一个兄弟<p>元素。

  9. 伪类选择器(Pseudo-class Selector):选择元素的特定状态或位置,以:开头,例如:hover选择鼠标悬停在元素上的状态。

  10. 伪元素选择器(Pseudo-element Selector):选择元素的特定部分,以::开头,例如::before选择元素的前面插入的内容。

  11. 否定选择器(Negation Selector):选择不符合指定条件的元素,以:not()包裹条件,例如:not(.container)选择不具有类名为container的元素。

  12. 状态选择器(State Selector):选择元素的特定状态,例如:checked选择已选中的复选框或单选按钮。

  13. UI元素状态选择器(UI Element State Selector):选择元素的特定用户界面状态,例如:enabled选择可用的表单元素。

  14. 结构性伪类选择器(Structural Pseudo-class Selector):选择元素的特定位置或结构,例如:first-child选择父元素下的第一个子元素。

  15. 网格布局选择器(Grid Layout Selector):选择网格布局中的元素,例如:nth-column()选择网格布局中的第n列。

0