css4—第4代选择器

        历史前进的步伐是不会停止的,紧跟着CSS3,新的CSS4也即将问世,它正由W3C编辑团队研发中。从历史的角度看,CSS的发展和web浏览器的发展是相互独立的,它们是并行进步的。这就导致不同的浏览器支持不同的CSS规范。但是回到CSS4中,W3C周期性地更新一个CSS4规范,并且我想第一时间给你提供关于已经包含在CSS4中的一些基本信息。

         在CSS4中引进了许多的新变化。没有新的虚元素被加进去,似乎将在以后将它们加入到其他的模块中。但是关注最多的就是虚类的发展。下面的元素被添加到了CSS4(当前时刻):逻辑联合,元素和属性选择器,新的虚类,联合器和结构性选择器。下面将重点介绍它们。

逻辑联合:反面和匹配任意虚类

在CSS3中,反面虚类只能用于简单选择器,虚类,标签,身份标识(id),类和类选择器参数。虚元素和联合体(如UL LI或者UL>LI)并不支持,我们也不能反虚类(并不是在其自身里面)。但是在CSS4中,:not()可以运用于一个选择器列和复杂选择器中。现在,选择器列表不在被划分到每个选择器的独立代码块中了。

p:not(.active, .visible) {color: yellow;}

同样适用于匹配类中(一个新的虚类,它允许匹配一个特定元素的样式)。你可以使用匹配虚类将选择器组合起来,使用一行匹配代码将它们组合起来。

article:matches(.active, .visible) {background: green;}

属性选择器:大小写敏感

目前在CSS4中,使用在中括号结束之前的i身份标识时,属性大小不再敏感了,例如:

[frame=hsides i] { border-style: solid none; }

属性“hsides”将会作用于“frame”,无论此属性的形式是“HSIDES”还是“hsides”或者“Hsides”等。并且这也同样作用于XML的大小写敏感的属性值。这在避免漫长的Debug是很有帮助的。

语言虚类

在新的CSS4中有另一个虚类,即:dir。作为一个方向性的虚类,它用于HTML5来帮助我们决定元素的方向,和其他一些因素(比如周围的文本)。A:dir(rtl)虚类将会让一个元素从右到左的朝向,而a:dir(ltr)将会给一个元素从左向右的朝向。注意,:dir与[dir=..]是完全不同的东西,因为:dir匹配的值是取决于UA的。

在语言虚类中的:lang有了新的变化。目前,:lang可以执行通配符匹配。例如,:lang(de-DE)将匹配所有符合的语言标签,并不仅仅只有'de-DE'和'de-DE-1996'。在主要语言(或者第一个子标签)的统配匹配,使用一个星号来完成。例如,*-CH将会匹配’de-CH','it-CH',等等。

查看如下例子,其描述如下:

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

位置虚类

        位置虚类指向访问者在你网站上的位置(不要将其与地理编码混淆了)。位置虚类有了新的变化。其中有一个名为:any-link的超链接虚类,它表示任何一个超连接的source anchor(根节点?)元素。

        第二个是:local-link虚类,它根据访问者在站点中的位置来装饰超链接的样式。此虚类也可以区分外部和内部超链接。在没有功能性的使用中,:local-link指向的是一个具有其目标和此元素文档URL相同的source anchor hyperlink(真的好难翻译)的元素。带功能性的使用中,:local-link可以在一个等级体系中,如下所示:

  • :local-link(0) – 代表一个连接元素,其target和文档的URL是在同一个源中。
  • :local-link(1) – 代表一个连接元素,其target具有相同源和第一个路径片段。
  • :local-link(2) – 代表一个链接元素,其target具有相同源和第一个、第二个路径片段。
  • 等等
时间: 2024-08-01 07:31:58

css4—第4代选择器的相关文章

CSS细节:选择器、单位、函数(方法)

文章简介:这篇文章讲到的特性,最赞的一点是它们解决了现实的问题,从琐碎而繁复的选择器到建立响应式网站的新挑战.实际上,我期待每一个特性被使用到最普通的项目当中. 未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍. 如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器.单位.函数(方法).我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的. 怎么

css3选择器(一)

直接开始正文. 一.属性选择器 属性选择器就是根据元素的属性及属性值来选择元素,用好属性选择器可以让你的级别上升一个层次. 1.只根据属性选择元素 适用于希望选择有某个属性的元素,只关心属性不关心属性值.. Note:元素和方括号中间没有冒号,也不能有空格,方括号之间也不能有空格. a.根据一个属性选择[E[Attr]]: *[title]{color:blue;}就可以给所以带title的元素设置样式. a[href]{color:red;}只对有href的锚(a 元素)应用样式. b.根据多

利用 :placeholder-shown 选择器实现 label 浮动效果

本文讲的是利用 :placeholder-shown 选择器实现 label 浮动效果, 设计师似乎喜欢用 浮动 label 模式 来设计华丽的效果,虽然我不确定我是否百分百喜欢这种方式,但我忍不住快速实现了一个这样的 demo.这个版本用上了一些我最近才看见的现代 CSS 表单样式技巧,特别是 :placeholder-shown 选择器. 先说重点:不管从形状或者形式上,这都不是一种最佳实践.这个 demo 的实现适用于某些浏览器的较新版本 - 尤其是 Chrome/Opera 和 Safa

jQuery 树形结构的选择器_jquery

DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点.这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings(). 选择某个元素的"孩子" - children() 复制代码 代码如下: <ul id="parent"> <li id="son1">第一列</li> <li i

jQuery Selectors(选择器)的使用(二、层次篇)_jquery

jQuery-Selectors(选择器)的使 用(二.层次篇) 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉 及很深,我的学习方法:先入门,后进阶! 本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章 . 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 您可以

到处都是jQuery选择器的年代 不了解它们的性能,行吗_jquery

最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用. 先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt. 复制代码 代码如下: <!-- 引入FireJSPT的库文件 --> <script type="text/javascript" src="firejspt.js"></script> <

css-CSS选择器的问题:.class.class{}

问题描述 CSS选择器的问题:.class.class{} 解决方案 这个样式是错误的,应该是少了空格或者少了逗号(逗号就是定义了2个类) 解决方案二: 你自己都回答了,其实这个跟div.d1或者#d2.d1类似,只不过把tag名和id名换成了样式名 解决方案三: 看你贴出来的代码,我想说id的用#,class的用点 解决方案四: 就是在使用了d1这个样式的标签中的了标签中再使用d2这个样式,设定的样式才会生效. 例如: <div class=d1><div class=d2>&l

css复合选择器:使用css的类名交集复合选择器

文章简介:使用css的类名交集复合选择器. 首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选择器. 交集选择器 "交集"复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如

CSS复合选择器:css3让我们选择元素变得越来越简单

文章简介:使用css的类名交集复合选择器. 首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选择器. 交集选择器 "交集"复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如