OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 心得体会   关键字 前端   发布 ourjs  1422582764864
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 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封装的选择器功能非常强大。但是这些草稿还没有完全定稿,还有变化的可能,当然,他们正式发布的时侯,我们将再次介绍!

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  3. AngularJS在大型单页面应用中的性能优化(二)
  4. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  5. 理解Node.js的事件循环(Event Loop)和线程池
  6. 什么是Viewport Meta(width详解)及在手机上的应用
  7. JavaScript中的$$(*)代表什么和$选择器的由来
  8. javaScript 依赖管理
  9. 中国互联网2014大事记
  10. io.js新支持的ECMAScript 6功能特性详解
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  2. [译]Node.js 框架比较: Express vs. Koa vs. Hapi
  3. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  4. 保卫AngularJS
  5. Angular.JS出了什么问题?
  6. 我们不需要JavaScript框架
  7. 各大邮件群发/订阅代理服务商比较
  8. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)
  9. CTO这点事
  10. Bootstrap vs Foundation如何选择靠谱前端框架

 关键字 - 前端
  1. 我们抛弃了AngularJS:单页面应用的5大缺陷
  2. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  3. 用纯css改变下拉列表select框的默认样式
  4. Animate.css让添加CSS动画像喝水一样容易
  5. 5个经典的前端面试问题
  6. AngularJS在大型单页面应用中的性能优化(一)
  7. 我被问得最多的十个JavaScript前端面试问题
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 10个值得前端收藏的CSS3动效库(工具)
  10. 前端开发工程师岗 招聘

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号