微信号:gh_15d32a71b93c

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

CSS选择器:属性选择器

2017-01-22 15:04 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。


    属性选择器匹配的元素基于其属性。这可以是一个属性,诸如[type],也可以是一个属性和值的组合,例如[type=checkbox]或[for="email"]。
    我们还可以使用属性选择器来判断属性存在和字符串匹配。例如,我们可以在一个空间分隔的列表中匹配属性值,或者我们可以匹配以tel:开始的属性。我们甚至可以匹配连字符的属性值,如en-US。
    在CSS2中定义了连字符属性选择器和空格分隔的属性选择器。另一方面,选择器Level 3添加了一些强大的选择器,让我们匹配部分属性值。在这里,我们将重点介绍新增的和鲜为人知的属性选择器。让我们来看看。
    匹配属性存在
    基于属性的确切值匹配元素是很常见的。重置样式表通常使用选择器选择,如[type=text]和[type=email]。但是当有多个空格分隔的值时,我们也可以匹配属性。我们需要利用空间分隔的属性值选择器:[att~=val]。
    空间分隔的属性选择器匹配选择带有属性元素att和列表,其中之一就是val。它可以接受空间分隔的值,包括任何属性class或data-*。
    空间分隔的属性列表是公认的罕见。他们有时与rel属性使用,微格式来描述人与文件之间的关系。我们可以标记一个外部链接,如:

    然后,我们可以使用此基础上的属性选择器来匹配此链接:

    得到了下图中的图像。

    匹配连字符属性值
    我们可以用属性选择器做更有趣的事,那就是通过使用连字符的属性值匹配元素[attr|=val]。这种选择器通过属性匹配元素时,它的值一般带有连字符并且前缀等于val。
    乍一看,这似乎是一个没用的选择器; 但是,在工作语言和语言代码上,它是很实用的,如en-US或者es-MX。
    假设我们有一个以英语为母语的网站。我们的网站还支持英语的两个区域变体:英国和美国。这些语言的语言代码分别为en-GB和en-US。我们还设置了语言html标签; 例如,<html>。
    我们的网站教英语人士熟悉法语,西班牙语和葡萄牙语。它包含许多类似于此示例的标记:

    让我们斜体化我们的法语文本,并添加语言适当的角度引号(«和»)到它的两边:

    这个选择器的优点是,如果属性等于前缀,它也将匹配。这些样式也适用于<p>。我们可以进一步限制这些选择器的范围,例如,通过添加p到该元素lang的属性:p[lang|="fr"]。
    虽然是用来与语言代码一起使用,但是该选择器不限于此。我们可以让它与任何连字符的属性值使用。思考下面的标记:

    这些都是文章或广告宣传。他们分享一些相同的视觉特性和行为,以及一个articlepromo前缀。在这里,我们也可以使用连字符属性选择器来匹配这些类名:

    按照每个边框类型的特定边框颜色进行跟踪,您将看到下图中布局的线条。

    我们也可以用它的id; 例如,[id|=global]将匹配#global-footer,#global-menu等等。
    连字符属性选择器适合用于样式语言差异。对于任何其他用法,你也可以使用类名选择器。类名在较大的项目中提供了较低的意外影响风险。如果您的项目仍需要Internet Explorer 8支持,则它们也是必须的,因为IE8不支持此选择器。
    通过字符串匹配属性值
    当属性值匹配特定字符串时,我们还可以选择元素。三个字符序列可以让我们根据这个字符串是否位于属性值的开头,结尾或其他位置来匹配元素:
^=
当字符串位于字符串的开头时匹配。
$=
当字符串位于字符串的末尾时匹配。
*=
当字符串存在于字符串中的任何位置时匹配。
    这些选择器何时可以派上用场?想想使用链接tel:(非标)或mailto:。由于它们的行为与其他超链接不同,因此有必要对它们进行不同的样式设置,作为对用户的提示。如下链接:

    我们可以选择这个或者其他tel:链接使用^=字符序列:[href^="tel:"]。让我们添加一些声明:

    您可以在下图中看到结果。

    当属性值相匹配的元素结束了,改^为$。如果,出于某种奇怪的原因——我们想匹配的电话号码的最后四位(5555),我们可以使用以下:

    显然,匹配以相同后缀结尾的元素更有用。例如,你可以同时匹配<aside class="sports-sidebar"> and <aside class="arts-sidebar"> 使用[class$=sidebar]。
    要匹配类名元素sports-sidebar-a。为此,我们可能需要使用到*=序列。更改我们的选择器为[class*=sidebar]来实现
    在CSS3和CSS4中添加的大多数新选择器都不是属性选择器。它们是伪类或伪元素。我们将在接下来的几节中讨论这些。


英文原文:https://www.sitepoint.com/how-to-implement-internationalization-i18n-in-javascript/
译者:Z.H.A.N.G


 
web前端程序员 更多文章 使用CSS网格布局放置元素的7种方法 关于Javascript的一些细微优化 RxJS的动画介绍(上) 50个AJAX面试问答 如何在Reactjs中进行简单的表单验证
猜您喜欢 关于如何构建一个微博型广播 【精品】仿网易云音乐播放界面 内部课程|巧用“用户画像”进行个性化运营 FEX 技术周刊 - 2015/10/19 那一夜,我终于忍不住把她推倒