CSS3 新增选择器概览

microelec 发布于2019-08-30 15:52 / 491人阅读

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

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.

云服务器 GPU云服务器选择器派生选择器省市选择器属性选择器

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

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

CSS 选择器

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

cnio 2019-08-28 18:18 评论0 收藏0
从零单排之CSS3

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

刘福 2019-08-28 17:59 评论0 收藏0
css3 新增了一些伪类选择器的解析(保证记住)

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

ThreeWords 2019-08-29 12:55 评论0 收藏0
css3

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

RancherLabs 2019-08-29 13:28 评论0 收藏0