最新CSS4选择器前瞻

澳门新葡亰手机版 2

W3C发布了最新的CSS选择器4级草案。本文将介绍这些最新的CSS4选择器的使用方法和注意事项。

CSS选择器 4 中包括了哪些新东西?

2015/02/23 · CSS ·
CSS,
选择器

本文由 伯乐在线 –
木木的乔安娜
翻译,JustinWu
校稿。未经许可,禁止转载!
英文出处:grack.com。欢迎加入翻译组。

CSS选择器4是下一代CSS选择器规范,上一个版本在起草多年后于2011年提出。

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

2015年4月30日,W3C发布了最新的CSS选择器4级草案。在我们开始介绍这些新的CSS选择器之前,你必须要了解,这些选择器目前在绝大部分的浏览器中都是不可用的。因为这只是一份草案。这是4级CSS选择器的第四份草案,第一份草案是2011年开始起草的。草案中的新CSS选择器只是一种有W3C社区的开发人员提出的一些规范。也许在不久的将来,这些新的CSS4选择器会被实现,在Chrome或Firefox浏览器中提供一些测试版本。下面我们来一起看一下有哪些新的CSS4选择器。:NOT(.WARNING,
.ALERT)
在CSS3选择器中,我们曾经见过:not选择器。在CSS4选择器草案中,:not选择器可以带有多个参数,用于更复杂的匹配。

选择器配置文件

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

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

以前,:not只可以在一个选择器上使用,它不能组合使用。例如,CSS3的:not选择器类似下面的样子:

:HAS

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

CSS

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

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

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

CSS

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

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

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

CSS

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

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

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

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

a:not([href*=somesite.com]) {}

:MATCHES

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

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

CSS

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
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) {
       ….
  }

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

CSS

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), ….
}

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自世纪之交就已经存在,但第四代选择器在此基础上增添了一个过滤功能:

CSS

div :nth-child(2 of .widget)

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

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

CSS

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

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中的父级选择器的话,你可能会意外地漏掉一些东西。例如:

CSS

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

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

:NOT()

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

CSS

// 相当于: // :not(h1):not(h2):not(h3)… :not(h1, h2, h3, h4, h5, h6)

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

上面的选择器会选择href属性中不带somesite.com的所有超链接元素。在CSS4选择器草案中,我们可以都一些更有趣的事情。

后代结合符(>>)

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

CSS

// 相当于: // p img { … } p >> img { … }

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

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

下面的例子中,会选择所有不是直接子元素,带有class为col或一col开头的超链接元素,并且会忽略子元素为图片元素的超链接。

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

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

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

CSS

// 下面的例子使单元格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>

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来设计单元格。

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

a:not([class|=col]a, :has(img)) { }

: PLACEHOLDER-SHOWN

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

复制代码

:ANY-LINK

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

CSS

// 相当于: // a:link, a:visited { … } a:any-link { … }

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

通过和:nth-last-child伪元素选择器结合,我们可以像下面这样写代码:

结论

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

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

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

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

2015年1月11日

div:not(.containerdiv:nth-last-child(-n+2)) {

相关文章

  • 使用CSS3的:nth-child发明新的选择器 2015年1月9日
  • 我们为何满意AppEngine(而非其他) 
    2010年11月23日
  • PubSubHubbub vs.
    rssCloud 2009年9月7日
  • Fedora Core
    3:在chroot监禁环境下运行CVS 2004年11月14日

    赞 1 收藏
    评论

}

关于作者:木木的乔安娜

澳门新葡亰手机版 1

简介还没来得及写 :)
个人主页 ·
我的文章 ·
10

澳门新葡亰手机版 2

复制代码

这将选择所有不是.container元素的直接子元素和最后两个兄弟元素的div元素。

你可以看到,这些CSS规则比以前版本的CSS选择器更加强大和复杂。

:HAS(DIV, P,
A)
这个:has选择器允许你选择带有参数中指定的子元素的元素。例如,选择带有img子元素的超链接元素,你可以使用下面的语法:

a:has(img) {}

复制代码

然而,:has选择器并不局限于单个选择器。你可以将:has选择器和:not和:nth-*选择器结合来更复杂的关系选择器。

例如选择一个行数大于10行的表格元素。

table:has(tr:nth-of-type(11)) {

}

复制代码

再如选择最后一个子元素是footer的body元素。

body:not(:has(footer:last-child)) {

}

复制代码

:ANY-LINK当前,我们可以在超链接元素上使用:link和:visited。这种写法比简单的使用a选择器更好,它会检查href属性,并检查用户浏览器的历史来决定该超链接是否被访问过。

:link, :visited {

color: blue;

}

复制代码

在CSS4选择器中,我们可以使用:any-link为所有的超链接提供样式,上面的代码可以写为:

:any-link {

color: blue;

}

复制代码

:SCOPED在CSS选择器中有全局范围的概念。换句话说,你添加了下面的代码:

div {

color: #444;

澳门新葡亰手机版,}

复制代码

那么所有的div都会接受color:
#444的样式。在CSS4选择器中允许在元素中使用局部样式:

section

h2This is outside the scope./h2

aside

style scoped

h2 {

font-size: 2rem;

}