那么,这一版本的新东西有哪些呢?

选择器配置文件

CSS选择器分为两类:快速选择器和完整选择器。快速选择器适用于动态CSS引擎。完整选择器适用于速度不占关键因素的情况,例如document.querySelector

选择器上下文不同,发挥的作用不同。一些功能强大的选择器很遗憾太慢了,不能切实地适应高性能环境。要做到这一点,需要在选择器规范里定义两个配置文件[参见]

:HAS

:has选择器是第四代选择器中最有趣的部分,但它有个重要的警告,下面会描述。它能让你改变选择器的选择对象,即实际将被赋予样式的特定元素,同时它还会继续和后文中出现的元素进行匹配。它开辟了许多匹配上下文的新方法。例如,匹配一个header:

1
2
// 有一个头元素的任何部分
section:has(h1, h2, h3, h4, h5, h6)

或者开发人员可以匹配只包含一定数量图片的段落:

1
2
3
4
// 侧边栏和五个子类
div.sidebar
    :has(*:nth-child(5))       // 拥有第5个子类
    :not(:has(*:nth-child(6))) // 但不具有第6个子类

甚至可以匹配包含特定子类数量的元素(本例有5个):

1
2
3
// 匹配一个全是图像的段落
  :has(img)             // 拥有一个图像
  :not(:has(:not(img))) //所有内容均是图像

警告:此时:has选择器并没有想象中的快速,这表明它不能在样式表中使用。由于目前还没有人实现这个选择器,它的性能特征还尚待研究。如果浏览器跟得上的话,它很快就能用于一般样式了。

早期版本的规范会在主题旁添加一个感叹号(!)表示警告,不过现在没有了。

:MATCHES

:matches是:moz-andy和:webkit-any的标准化选择器,已经与浏览器前缀共存了一段时间。它允许样式表的创建人员删除重复的规则路径。

它的用处是,对一个类似笛卡尔积(Cartesian-product-esque)的SCSS/SASS输出进行整理,比如下面这段:

1
2
3
4
5
6
7
8
9
10
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) {
       ....
  }

可以输出为下面这种更便于维护的样式:

1
2
3
4
5
6
7
body > .layout > .body > .content
   :matches(.post, .page)
   :matches(p, li)
   :matches(a.image.standard:first-child:nth-last-child(4),
            a.image.standard:first-child:nth-last-child(4) ~ a.image.standard),
      ....
 }

上述Mozilla的参考页列出了有关性能的一些注意事项。既然这个选择器致力于成为标准,我们希望能看到更多有关性能方面的工作,使之更轻便。

:NTH-CHILD(AN+B [OF S])

虽然:nth-of-typey自世纪之交就已经存在,但第四代选择器在此基础上增添了一个过滤功能:

1
div :nth-child(2 of .widget)

选择器S用于确定索引,它独立于伪类左边的选择器。如规范中提到的,如果你提前知道了元素的的类型,就可以将:nth-of-type选择器转化为:nth-child(… of S),如:

1
img:nth-of-type(2) => :nth-child(2 of img)

这个选择器和:nth-of-type的区别是微妙但重要的。对于:nth-of-type,无论是否给一个元素添加了选择器,它都会对有相同标记的内容加入隐式索引。每当你使用一个新的选择器,:nth-child(n of S)就会使计数器加1.

这个选择器有潜在的缺陷。因为:nth-child 伪类中的选择器是独立于其左边的选择器的,如果你在左边制定一个非:nth-child中的父级选择器的话,你可能会意外地漏掉一些东西。例如:

1
tr:nth-child(2n of [disabled])

:NOT()

你可能已经用了:not一段时间,你可以通过传递多个参数来节省大小和手工输入。

1
2
3
// 相当于:
//    :not(h1):not(h2):not(h3)...
:not(h1, h2, h3, h4, h5, h6)

后代结合符(>>)

早期CSS中,后代选择符的作用是一段()空间,不过现在作用更加明显:

1
2
3
// 相当于:
//    p img { ... }
p >> img { ... }

这样做是为了联系直接后代(>)和shadow DOM(>>>)操作符。

列结合符(||)和:NTH-COLUMN

CSS4增加了列操作功能,这样开发人员就能更简便地在表格里对单独的列进行设计。目前设计表格需要使用 :nth-child,如此一来就不需要使用colspan 属性来匹配表格的列。

通过使用新的列组合符(||),你可以用<col>标记表中的相同列,然后对该列中的单元格进行设计:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 下面的例子使单元格C,E,G为黄色。
// 例子来源于CSS选择器4规范
col.selected || td {
  background: yellow;
  color: white;
  font-weight: bold;
}
 
<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

另外,样式表设计人员还可以用:nth-column和:nth-last-column来设计单元格。

这两种情况下,如果一个单元格横跨多列,它可以匹配这些列中任意一个选择器。

: PLACEHOLDER-SHOWN

选择器规范里还添了一个:placeholder-shown,当且仅当placeholder 属性文本可见时,它将会匹配一个输入的元素。

:ANY-LINK

另一个小小的改变就是:any-link,它的作用就是匹配任何:link和:visited可匹配的内容。

1
2
3
// 相当于:
//    a:link, a:visited { ... }
a:any-link { ... }

结论

CSS4中的选择器尚在研究之中,不过我们看到,已有很多有用的选择器为开发人员提供了新的模式和工具,方便他们的设计。规范中也有其他新的选择器,他们的访问、有效性检验和样式范围界定等概念文中并没有提到。

如果你想试验一下这些选择器,你得等到可兼容的浏览器出现,或是尝试一下早期的版本,如:moz-any和:webkit-any的作用和:matches就相同,WebKit早期就支持:nth-child选择器

因为这是笔者的草案,伪类的名字可能会发生改变。要获取更多内容,请留意CSS 4选择器规范

如有建议可在Twitter 上 @mmastrac让我知道。

CSS选择器4是下一代CSS选择器规范的更多相关文章

  1. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  2. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  3. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  4. 表单控件 css的三中引入方式css选择器

    1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" nam ...

  5. 【CSS】381- 提升你的CSS选择器技巧

    我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. ...

  6. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  7. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. css知多少(6)——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

随机推荐

  1. action找不到

    错误: {"name":"Not Found","message":"Unable to resolve the request: ...

  2. select count(1) from table where ..这句sql语句的作用

    作用是计算一共有多少符合条件的行.1并不是表示第一个字段,而是表示一个固定值,count(1)和count(2)效果是一样的 count(*),执行时会把星号翻译成字段的具体名字,效果也是一样的,不过 ...

  3. GO的数组及切片

    感觉在向PYTHON学一些数组方面的功能. package main import "fmt" func main() { ]], , , , , , , , , } ] fmt. ...

  4. Handler处理长时间事件

    当我们在处理一些比较长时间的事件时候,比如读取网络或者数据库的数据时候,就要用到Handler,有时候为了不影响用户操作应用的流畅还要开多一个线程来区别UI线程,在新的线程里面处理长时间的操作.开发的 ...

  5. Android应用程序插件化研究之AssertManager

    最近在研究Android应用的插件化开发,看了好几个相关的开源项目.插件化都是在解决以下几个问题: 如何把插件apk中的代码和资源加载到当前虚拟机. 如何把插件apk中的四大组件注册到进程中. 如何防 ...

  6. shell中的IFS详解

    在bash中IFS是内部的域分隔符,manual中对其的叙述如下:IFS The Internal Field Separator that is used for word splitting af ...

  7. redis maxmemory设置

    关于maxmemory的设置,如果redis的应用场景是作为db使用,那不要设置这个选项,因为db是不能容忍丢失数据的. 如果作为cache使用,则可以启用这个选项(其实既然有淘汰策略,那就是cach ...

  8. Xmind 快捷键

    Xmind 快捷键 快捷键(Windows) 快捷键(Mac) 描述 Ctrl+N Command+N 建立新工作簿 Ctrl+O Command+O 开启工作簿 Ctrl+S Command+S 储 ...

  9. 利用linux信号机制调试段错误(Segment fault)

    在实际开发过程中,大家可能会遇到段错误的问题,虽然是个老问题,但是其带来的隐患是极大的,只要出现一次,程序立即崩溃中止.如果程序运行在PC中,segment fault的调试相对比较方便,因为可以通过 ...

  10. Spring Ldap 的增删改查

    package ldap.entity; /** * 本测试类person对象来自schema文件的core.schema文件 * objectClass为person,必填属性和可选属性也是根据该对 ...