CSS 伪类选择器

简介: CSS 伪类选择器

E:link

链接伪类选择器

选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过,常用于链接锚点上


E:visited

链接伪类选择器

选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过,常用于链接锚点上


E:active

用户行为伪类选择器

选择匹配的E元素,而且匹配元素被激活,常用于链接锚点和按钮上


E:hover

用户行为伪类选择器

选择匹配的E元素,而且用户鼠标停留在元素E上。


E:focus

用户行为伪类选择器

选择匹配的E元素,且匹配元素获得焦点


E:target

选择匹配的E元素,而且匹配元素被相关URL指向


Eg:

另一种是手工在文档中指定lang属性

E:checked

选中状态伪类选择器

匹配选中的复选按钮或单选按钮表单元素


E:enabled

启用状态伪类选择器

匹配所有启用的表单元素


E:disabled

不可用状态伪类选择器

匹配所有禁用的表单元素


E:firse-child

E:first-child


作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

作为父元素的第一个子元素的元素E。与E:nth-child(1)等同


E:last-child

E:last-child


作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同


E:root

E:root


选择匹配元素E所在文档的跟元素。在HTML文档中,跟元素始终是html,此时该选择器与html类型选择器匹配的内容相同。

选择匹配元素E所在文档的跟元素。在HTML文档中,跟元素始终是html,此时该选择器与html类型选择器匹配的内容相同。


E F:nth-child(n)

E F:nth-child(n)


选择父元素E的第N个子元素F。其中N可以是整数(1、2、3)、关键字(even、odd)、可以是公式(2n+1、-n+5)而且n值起始值为1

选择父元素E的第N个子元素F。其中N可以是整数(1、2、3)、关键字(even、odd)、可以是公式(2n+1、-n+5)而且n值起始值为1


E F:nth-last-child(n)

E F:nth-last-child(n)


选择元素E的倒数第N个子元素f。此选择器与E F:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配的时最后一个元素,与:last-child等同

选择元素E的倒数第N个子元素f。此选择器与E F:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配的时最后一个元素,与:last-child等同


E:nth-of-type(n)

E:nth-of-type(n)


E:not(F)

匹配所有除元素F外的E元素


相关文章
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
35 1
|
2月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
46 1
|
7天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
23 2
|
26天前
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
2月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
74 1
|
23天前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
16 0
|
28天前
|
前端开发
CSS常见的选择器
CSS常见的选择器
15 0
|
2月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
3月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
31 1