css3新增选择器

一、css3之前的选择器

  1. ID选择器
  2. 类选择器
  3. 包含选择器(E F)
  4. 伪类选择器(:link,visited,hover,active,focus,first-child)
  5. 伪元素选择器(::first-line,first-letter,before,after)
  6. 通配选择器(.)
  7. 属性选择器(foo[name='martin'])
  8. 子包含选择器(E>F)
  9. 相邻兄弟选择器(E+F)

二、css3新增选择器

新增属性选择器:

  1. E[foo^='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以bar开头
  2. E[foo$='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以bar结尾
  3. E[foo*='bar'] 匹配E元素,该元素包含foo属性,且foo属性值包含bar字符串

新增结构伪类选择器:

  1. E:root 匹配文档所在的根元素
  2. E:nth-child(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素也参与排序,若第n个子元素不是E元素,则该语句没有效果(注意这里的n从1开始)
  3. E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素
  4. E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素不参与排序(n同样是从1开始)注意区别nth-child(n)
  5. E:last-child
  6. E:first-of-type
  7. E:last-of-type
  8. E:only-child
  9. E:only-of-type
  10. E:empty

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholder样式(也有可...

    用户6167509
  • CSS3实现瀑布流布局(display: flex/column-count/display: grid)

    在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码...

    Javanx
  • css3实现ae动画冰激淋流动的遮罩效果

    See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.1

    Javanx
  • 初次接触CSS变量

    本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为...

    用户6167509
  • Vue经典面试题总结(含答案)

    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;...

    Javanx
  • 利用CSS线性渐变、阴影、缩放实现动画下雨效果

    这个动画效果,如果让你来做,你会选择什么方式?相信很多小伙伴都会用gif图片。其实用css实现也很简单。

    Javanx
  • 4种方案解决CSS浏览器兼容性问题

    前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。

    Javanx
  • tooltip.css-2.0文档

    只需在页面中引入"tooltip.css"或“tooltip.min.css”文件即可。

    用户6167509
  • CSS3实现美美哒的图片倒影效果

    设置渐变,不能直接在img2上面添加样式了,必须用另外一个层来盖在上面,所以我们就用伪元素来处理这个效果

    Javanx
  • 春眠不觉晓,vh、vw、vmin、vmax 知多少

    介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用。

    Javanx

扫码关注云+社区

领取腾讯云代金券