资讯专栏INFORMATION COLUMN

css3 新增了一些伪类选择器的解析(保证记住)

ThreeWords / 3368人阅读

摘要:新增了一些伪类选择器比如不要费力去理解他们到底为了解决什么问题是对集合进行操作还是怎么怎么着记住这么一个规则如果生效需要也就是当前元素的父元素的第一个子元素就是它本身此时才会生效同理需要才会生效第二类注意这里的有很大发展空间可以实

css3 新增了一些伪类选择器

比如: selecor:first-child

不要费力去理解他们到底为了解决什么问题, 是对集合进行操作还是怎么怎么着, 记住这么一个规则:
如果 selector:first-child 生效, 需要:
    **selector.parent.children.first == selector;**

也就是: 当前元素的父元素的第一个子元素就是它本身, 此时, selector:first-child 才会生效.

同理:
selector:last-child, 需要:

selector.parent.children.last == selector;  才会生效
第二类

nth-child()
注意这里的 n 有很大发展空间, 可以实现 奇/偶, 选择哪几个, 从哪几个开始选.

nth-last-child() 倒着选

第三类

:first-of-type
:last-of-type

第四类

:nth-of-type
:nth-last-of-type

第五类

:root
选择文档根元素.就是 html
:empty
选择元素中连个空格都没有的元素
:not
否定选择器
:only-child
在集合只有一个元素的时候才会生效.
::selection
只能设置两个属性:background,color.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112240.html

相关文章

  • CSS3主要内容

    摘要:必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西,但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片,可以加快页面的载入时间减小带宽占用。 CSS3主要内容 一、CSS选择器 ​ CSS3选择器规范地址: https://www.w3.org/TR/2011/RE...​ ...

    X_AirDu 评论0 收藏0
  • CSS 选择

    摘要:加号相连的两个选择器实现同级紧邻的元素选择的功能。我最好的朋友是米老鼠。样式紧挨的第一个同级元素是我最好的朋友是米老鼠。注意区分新增的属性选择器。是中新增的选择器,用于标示当前处于活动的锚标记。选择器的取反,这个很好理解。 概览 在 CSS 中,选择器用于选择需要添加样式的元素。 CSS 选择器非常丰富,现将 CSS 1 - 3 目前所有的选择器列举如下。 选择器 例子 例子描述 ...

    cnio 评论0 收藏0
  • 前端面试题2(CSS)

    摘要:在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素,相对于其正常位置进行定位。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。 前端面试之CSS display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任...

    MangoGoing 评论0 收藏0
  • 前端面试题2(CSS)

    摘要:在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素,相对于其正常位置进行定位。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。 前端面试之CSS display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任...

    zorro 评论0 收藏0

发表评论

0条评论

ThreeWords

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<