提高前端开发效率的CSS属性选择器是什么

　　介绍

这篇文章主要介绍了提高前端开发效率的CSS属性选择器是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。

通常将HTML <代码> 属性放在方括号中,称为属性选择器,如下:

 p[标题]

但你也可以通过以下操作选择具有<代码> 属标题性的<强> p 的子元素

p[标题]

需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。

你可以更精细地选择具体属性值的属性。

p (title=癲na")

上面选择了所有具有确切名称dna <代码> 的p,虽然有选择器算法可以处理每种情况(以及更多),但这里不会选择<强>“dna是很棒”或<强>“dnamutation”的标题。

注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。

如果你想选择标题<强> 包含dna <代码> 的元素,如“我美丽的dna”或者”突变dna是乐趣!”,可以使用<>强波浪号(~ )。

p[标题~=癲na"]

如果你想匹配以<代码> 结dna尾的<强>标题强,如“dontblamemeblamemydna”或“his-stupidity-is-from-upbringing-not-dna”,刚可以使用<代码> 美元标志符:

[标题=美元“dna"]

如果你想匹配以dna <代码> 开头的<强>标题强,如“dnamutants”或“dna-splicing-for-all”,刚可以使用<代码> ^> [标题^=癲na"]

虽然精确匹配是有帮助的,但它可能选择太紧,并且<代码> ^> 管道特征(|)强就是这样,属性中必须是完整且<强>唯一的单词,或者以<代码> - 分隔开。

[标题|=癵ene"]

最后,还有一个匹配任何子字符串的模糊搜索属性操作符,属性中做字符串拆分,只要能拆出来dna <代码> 这个词就行:

[标题*=癲na"]

使这些属性选择器更加强大的是,它们是可堆叠的,允许你选择具有多个匹配因子的元素。

如果你需要找到一个<代码> 标签,它有一个<代码>标题> 一个[标题][类=美元“genes"]

你不仅可以选择HTML元素的属性,还可以使用伪类型元素来打印出文本:

& lt;跨类=癹oke"title=盎虮嗉?“比; 　　生物科技记者所做的第一件事是什么完一篇文章的初稿? 　　& lt;/span> 。笑话:徘徊:{后 　　内容:“回答:“attr(标题); 　　显示:块; 　　}

上面的代码在鼠标悬停时将显示一串自定义的字符串。

最后要知道的是,您可以添加一个标志,让属性搜索不区分大小写。在结束方括号之前添加<代码> :

提高前端开发效率的CSS属性选择器是什么