资讯专栏INFORMATION COLUMN

CSS3 新增选择器概览

microelec / 399人阅读

摘要:这个是后代选择器怪异注意避免而不是理解当前选中的元素集合中的第一个元素当前选中的元素集合中的最后一个元素但是有问题不生效应该是当前的父元素所有子元素子元素的集合的第一个元素如果是设置样式生效生效所以使用这两个伪类在其上添加一个父元素

selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

但是有问题, :last-child 不生效.

应该是:
1 当前 selector 的父元素 parent
2 parent所有子元素, [a,b,c]
3 子元素的集合的第一个元素, 如果是 selector
4 设置样式, 生效.

  **if(selecor.parent.childElementList.firstElement === 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/116479.html

相关文章

  • CSS 选择

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

    cnio 评论0 收藏0
  • 从零单排之CSS3

    摘要:概览大法好今夜秋风阵阵,雾霾层层。布局选择多媒体,字体响应就是屌。说起来条目繁多,乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说,最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋风阵阵,雾霾层层。不禁让人想作诗,不过...

    刘福 评论0 收藏0
  • css3 新增了一些伪类选择的解析(保证记住)

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

    ThreeWords 评论0 收藏0
  • css3

    css3新增选择器 属性选择器 包括h5中新增的自定义属性 p[data-id]{color: red} sasas 属性选择器可以指定属性值 的样式变化 E[attr=value] 指定属性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才会...

    RancherLabs 评论0 收藏0
  • HTML5+CSS3整体回顾

    摘要:设置文字的描边制表符的长度当前行超过指定容器的边界时是否断开转行规定自动换行的处理方法是否使用一个省略标记标示对象内文本的溢出默认值无省略号当对象内文本溢出时显示省略标记。或表示红色,表示绿色,表示蓝色,也可取其他数值来指定颜色。 转载请声明 原文链接 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,并不是很详细,后面会一直完善补充新的内容,本文是一些笔记记录,放在这里供自己参考...

    xingqiba 评论0 收藏0

发表评论

0条评论

microelec

|高级讲师

TA的文章

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