编程学习网 > WEB开发 > CSS+DIV > 即将推出的CSS4 Level 4 Selectors(第4级选择器)
2015
02-02

即将推出的CSS4 Level 4 Selectors(第4级选择器)

  注* CSS4草案发布了。

  是时侯学习一些新的CSS,不是吗?

  我们都习惯去学一个又一个的新前端框架,但是我们常常忘记了,作为我们每天使用的网络核心语言CSS本身也在不断地推出一些新功能。

  W3C编辑草案

  从1月15日的CSS Selectors Level 4 draft 草案描述了一次CSS的飞跃。

  在我们开始之前,你应该知道:本文中的CSS,很多都无法在浏览器中工作。即使是最新的浏览器。这是因为,它们还是一些草案-处于起草阶段。 level 4 selectors草案于2011年开始,第四版经过大量的讨论而最终制定。

  所以,这是什么意思?这意味着,在不久的将来,我们可能看到大部分这些功能都将实现,很多将在Chrome和Firefox浏览器的开发版本中提供。

  让我们来看看有哪些新东西!

  1. :not(.warning, .alert)

  我们在第3级选择器已经见过这个 :not 了。然而Level 4将允许与更复杂的参数匹配。

  先前,not:只能单独使用,不能被组合。例如,在Level 3(CSS3)中,你不能这样做:

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

  它会选择所有地址中不包含somesite.com的链接。但是在新草案中,这样是允许的。

  下面是另外一个例子,选择不在col样式(Bootstrap 流式列布局样式)下的的a链接标签,和除去那些包含img图片的a标签

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

  此外,这选择器还能这样写,不选择那些后面还跟着另一个DIV的DIV。(选择同级最后一个DIV)

div:not(div+div) {
     
}

  2. :has(div, p, > a)

  :has 伪元素选择器允许您选择带有指定子元素的父级元素。例如,要选择带有图像子元素为的链接,你可以使用下面的语法:

a:has(img) {
}

  然而 :has 不局限于简单的选择器。你可以与:not 和 :nth-* 选择器相结合。

  例如,我们的选择有超过十行的表元素:

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

  :has() 和 :not() 结合使用

  选择最后一个元素不是footer的body

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

  3. :any-link

  目前,我们可以使用:link和:visited表明链接的访问状态。这个更进一步,它会检查href的是否在用户的浏览历史中存在,以确定是否一个给定的链接是否已被访问。

:link, :visited {
   color: blue;
}

  建议用 level 4 选择器,可以直接这样应用,上述代码等价于:

:any-link {
   color: blue;
}

  4. :scoped

  直到level 4选择器,CSS被赋予一个全局范围。换句话说,如果你添加下面的CSS:

div {
   color: #444;
}

  所有的div将应用的 color:#444 的样式规则(这里假设没有被复写的情况下)。Level 4选择器 允许将样式和风格限定于一个元素标签内:

<section>
  <h2>This is outside the scope.</h2>
  <aside>
    <style scoped>
      h2 {
        font-size: 2rem;
      }
    </style>
    <h2>This is within the scope</h2>
  </aside>
</section>

  在这个例子中,我们已将应用范围到限定在aside元素中。在这种标记风格将只适用于父元素下的子元素。

  5. :matches(selector1, selector2)

  :matches 伪元素选择器可以让我们检查,一个元素所有在列表中匹配的子元素。例如,如果你想针对所有article下的,段落和H2标签和链接,你可以这样写:

article :matches(h2, a, p) {
     
}

  这取代了以前更加详细的语法:

article a, article h2, article p {
     
}

  6. 延伸选择器>>

  你可能熟悉的空格字符让我们应用到元素的后代上,比如一个div内的所有链接:

div a {
     
}

  但是到现在为止,我们还没有看到一个明确的后代选择符。 level 4 添加了一个 >>

  但是请注意,这会导致不必要的多余的字符,它与一个空格是等价的。

  7. Table In-Column 选择器

  这是给table元素新加的一个功能,我们先来看一个基本的table表格:

<table>
  <colgroup>
    <col class="id">
    <col class="personnel-info" colspan="2">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <span class="c"><!-- etc --></span>
    </tr>
  </tbody>
</table>

  给水平分组元素(即:同一行中)应用样式很简单。但给垂直的元素是整体应用样式有些麻烦。

  你为了给 personnel-info 这一列添加样式风格,可以使用Level 4的 || 选择符。在||选择符可以针对一列下的TD元素应用样式,如:

.personnel-info || td {

}

  结论

  Level 4封装的选择器功能非常强大。但是这些草稿还没有完全定稿,还有变化的可能,当然,他们正式发布的时侯,我们将再次介绍!

  原文地址: webdesign.tutsplus.com

扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取