CSS4教程

 

相当大量的新变化带来了与CSS4 。没有新的伪元素加入，似乎他们可能在其他模块中被添加在未来。然而，在伪类的发展是付出了更多的关注。下列元素中加入在CSS4 （当前时刻）的逻辑组合，元素和属性选择器，新的伪类，组合器和网格结构的选择器。下面是其中的高级概述。

 

CSS3中，否定伪类：不能够只适用于简单的选择， pseudoclasses ，标签，标识，类和类选择参数。不支持Pseudoelements和这样的组合像李UL认证或UL > LI ，我们也无法包括的否定伪类：本身并不是。在第4级，但是， 没有（ ）现在可以被施加到选择器和复杂的选择列表。现在，不再将选择器列表必须分为代码块分隔每个选择器。

 

这同样适用于：匹配类 - 一个新的伪类，将允许匹配样式的某些元素。您可以使用：匹配伪类选择器组一起，有一行代码分组进行匹配项目。

 

属性选择：区分大小写

目前，在CSS4 ，属性的情况下，将不再需要区分大小写的右括号之前我]使用标识符。例如，在

 

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

 

 

的' hsides '属性将被施加到“框架”是否是“ HSIDES '，' hsides '，' Hsides '等等。这也适用于在XML中区分大小写的属性值。这是有用的，以避免长时间的调试。

 

还有另外一个新的CSS4伪类 - 命令dir 。作为一个方向性的伪类，它是用来在HTML5中，以帮助我们确定元素的方向性，以及其他因素，如周围的文本。答： DIR （ RTL ）伪类会给出一个元素的右到左方向性，而命令dir （ LTR ）将有一个相反的方向性：左到右。要注意的： dir是不一样的东西[ DIR = ...]属性选择，因为：目录作为由UA确定相匹配的值。

新的变化发生语言伪类：lang的。目前， ：语言可以进行通配符匹配。例如， ：郎（ DE -DE ）匹配所有匹配的语言标记，而不仅仅是'去德'和' DE -DE -1996 “ 。在小学语文（或第一子标签）通配符匹配，是通过一个星号。例如， * -CH将匹配“去CH ”，“它-CH '，等等。

请检查下面的例子描述如下：以下两种选择代表一个HTML文件，是在比利时法语和德语。两下一选择代表在比利时法语和德语任意元件Q语录：

 

位置伪类是指在您的网站访问者的位置（不与地理编码混淆） 。新的变化来定位伪类。其中之一是一个超链接伪类名为：任何链路中，它代表的是超链接的源锚点的任何元素。

第二个是：本地链路伪类的超链接样式，根据网站上的网站访问者的位置。此伪类也可以外部和内部链接之间的区别。的：本地链路指的是有一个源超链接的锚，其目标是相同的非功能性的使用该元素的文档URL的元素。功能用途：本地链路可以是在一个分层方案如下：

 ：本地链路（ 0 ） - 代表一个链接元素，其目标是在同一个原点为文档的URL

 ：本地链路（ 1 ） - 代表一个链接元素，其目标具有相同的起源和第一个路径段

 ：本地链路（ 2 ） - 代表一个链接元素，其目标具有相同的起源，第一，第二和路径段

等

的：范围伪类代表是在参考元素的元素集合。这是一组提供了一个参考点选择要匹配的元素，例如，通过在[选择器 - API2 ]的querySelector （ ）调用，或在HTML5中一个作用域<style>元素的父元素中指定的。

几个例子：

这拖和丢弃：伪类适用于定义为指定为“拖放区域”页面上的区域元素，或者换句话说，存款在其上的用户可以删除拖动的元素。功能：降伪类简单地超越了常规：降功能，让额外的过滤器：

 ：掉落（主动） - 拖放目标是当前放置目标的拖动操作。也就是说，如果用户要释放阻力，它会被滴到此放置目标

 ：掉落（有效） - 如果主机的语言有“有效”和“无效”下降目标的概念，这个只匹配，如果放置目标的有效期为当前被拖动的对象。否则，它匹配所有的拖放目标

 ：掉落（无效） - 如果主机的语言有“有效”和“无效”放置目标的一个概念，如果下降的目标是正在拖动的对象无效这只匹配。否则，它没有相匹配。

例如：

时间维伪类允许一定时间范围内的元素进行分类，例如在文档的讲话渲染。 ：当前伪类是元素或其祖先是活跃的时刻。例如，一个段落朗读被读取将与下面突出显示：

的：过去的伪类指的是指定一个之前发生的一个元素：当前元素。答：未来的伪类是相反的，是指一个定义之后出现的元素：当前元素。

 

所列出的伪类是指以用户输入的元素，如HTML的<input>元素。

的：使伪类表示处于启用状态的用户界面元素，这些元素有一个相应的禁用状态。相反，禁用伪类表示处于禁用状态的用户界面元素，这些元素有一个相应的启用状态。

一个元素匹配：可读写，如果是用户可变的，由宿主语言定义。否则，它是只读。

输入元素有时可以显示占位符文本是暗示什么输入所在的用户

的：默认伪类适用于那些在一组相似的元素的默认的一个或多个用户界面元素。通常适用于上下文菜单项，按钮和选择列表/菜单。

无线电和复选框元素可以由用户进行切换。一些菜单项“选中”当用户选择他们。当这样的元素“中的”切换的：查伪类适用。

的：不确定伪类适用于UI元素，它的值是处于不确定状态。

的元素是：有效或：当它的内容或值，分别有效的或相对于由文档语言定义的数据的有效性的语义无效无效。它缺乏数据的有效性语义元素既不是有效，也不是无效。

的：在范围和：超出范围的伪类仅适用于有范围的限制因素。的元素是：在范围或：外的范围时，该元件被绑定到的值是否在范围内或超出范围，相对于它的范围限制由文档语言所定义的。缺少数据的范围限制，或者不是窗体控件元素既不是在范围之外的范围。

表格元素是：要求或可选的，如果它的值是分别要求或属于可以有效地提交表单前选购。未构成元素的元素既不要求也不可选。

的：用户错误的伪类表示不正确的输入的输入元素，但只有在用户已经显著与它互动。的：用户错误的伪类必须匹配：无效：超出范围的，或空 - 但是 - ：用户试图提交表单和用户之前已与互动再度时间之间所需的表单元素表单元素。用户代理可以允许它以匹配在其他时间这样的元素，如将是适当的突出错误给用户。

现有的两个结构性伪类（ ：空：根目录）进行了补充新：空白伪类。它是类似于：空的，但它也指元件之间的字符。例如：

它可被视为：因为换行符和其他可能的空格空， ：空，但并非如此。

两个新的结构伪类添加 - ：第n个匹配（ <selector>的+ B）和：第n -最后的比赛（ AN + <selector>的B）。的：第n个匹配代表与匹配来之前它一定的选择列表中的（一个+ B - 1 ）的兄弟姐妹的物品;的：第n -最后的比赛是类似的，除了它是指一个匹配选择器列表后在文档。

此伪类可以使用A / ATTR / B连接的元素为目标，而一个元素的ID引用了另一个元素的ATTR属性。这遵循相同的规则进行属性选择器。下面的例子显示了突出显示，当标签徘徊在一个输入：

 

CSS4让我们使用目标父元素！ > B，其中A元素是B元素的父元素。例如，我们可以针对某个元素的父时，该元素上徘徊。如你所知，在下拉菜单当最后一个li为主动，父李总是失去焦点CSS3中。然而，针对家长的能力，有可能给父李一定的风格，当孩子里是活动的，请检查下面的例子：

CSS3中，列有可能的，但它是非常困难的孤立他们的造型。 CSS4使我们能够做到这一点 - 一个简单的方法与单个列的工作。首先，这是列组合子'| | '，这允许选择具有指定的特征集合中的列。的：第n列（ n）的允许某些列的造型，从头开始计数。在相反的：第n -最后一列（ n）的开始从底计数。注意，这两个：第n列和：第n -最后一列可以包括“奇”和“偶”值。看看下面的例子：

复制本文《CSS4教程》地址给好友：

将此文章《CSS4教程》收藏或分享到：