css伪类是dom元素吗?

伪类是CSS中的一种选择器。伪类表示已存在的某个元素处于某种状态,但是通过dom树又无法表示这种状态,就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素,如:a:hover

伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪类的分类:状态伪类和结构性伪类

状态伪类:是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。

常见的状态伪类主要包括:

  • :link 应用于未被访问过的链接;

  • :hover 应用于鼠标悬停到的元素;

  • :active 应用于被激活的元素;

  • :visited 应用于被访问过的链接,与:link互斥。

  • :focus 应用于拥有键盘输入焦点的元素。

结构性伪类:是css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。

常见的结构性伪类包括:

  • :first-child 选择某个元素的第一个子元素;

  • :last-child 选择某个元素的最后一个子元素;

  • :nth-child() 选择某个元素的一个或多个特定的子元素;

  • :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

  • :nth-of-type() 选择指定的元素;

  • :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;

  • :first-of-type 选择一个上级元素下的第一个同类子元素;

  • :last-of-type 选择一个上级元素的最后一个同类子元素;

  • :only-child 选择的元素是它的父元素的唯一一个子元素;

  • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;

  • :empty 选择的元素里面没有任何内容。

  • :checked匹配被选中的input元素,这个input元素包括radio和checkbox。

  • :default匹配默认选中的元素,例如:提交按钮总是表单的默认按钮。

  • :disabled匹配禁用的表单元素。

  • :enabled匹配没有设置disabled属性的表单元素。

  • :valid匹配条件验证正确的表单元素。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css伪类是dom元素吗?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏