选择元素时在css中使用的插入符号^是什么? [英] What is caret symbol ^ used for in css when selecting elements?

问题描述

我在这样的文件中遇到了一个 css 选择器:

I encountered a css selector in a file like this:

#contactDetails ul li a, a[href^=tel] {....}

推荐答案

这样的抑扬符^"在 CSS 中没有明确的含义.两字符运算符^="可用于属性选择器.通常，[attr^=val] 是指那些具有 attr 属性且值以 val 开头的元素.

The circumflex character "^" as such has no defined meaning in CSS. The two-character operator "^=" can be used in attribute selectors. Generally, [attr^=val] refers to those elements that have the attribute attr with a value that starts with val.

因此，a[href^=tel] 指的是具有 href 属性且值以 <开头的此类 a 元素代码>电话.这可能是为了将电话号码链接与其他链接区分开来；这还不够，因为选择器也匹配例如<a href="tel.html">...</a> 但它可能只匹配以 tel: 作为协议的链接部分.所以 a[href^="tel:"] 会更安全.

Thus, a[href^=tel] refers to such a elements that have the attribute href with a value that starts with tel. It is probably meant to distinguish telephone number links from other links; it’s not quite adequate for that, since the selector also matches e.g. <a href="tel.html">...</a> but it is probably meant to match only links with tel: as the protocol part. So a[href^="tel:"] would be safer.

这篇关于选择元素时在css中使用的插入符号^是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！