Question

我知道有些选择器可以找到以某些东西开头的html属性值，例如： bar：

[class^=bar] { ... }

有没有办法选择以特定文字开头的html元素，例如<my-calendar>, <my-contact>, ...：

my-* { ... }

或者在未来的CSS规范中是否有提议的选择器（例如，对于新的自定义元素）？

编辑：由于很多人提出了替代解决方案：

我只是出于对未来项目的好奇心而且我知道今天还有很多其他方法可以解决这个问题。

Answer 1

简答：通过命名空间排序。

如果您为所有代码指定相同的命名空间，则应该能够通过namespace|*定位它们。大概。我能找到的唯一官方文档是规范本身：https://drafts.csswg.org/css-namespaces-3/ 试图理解它很难 - the (very) naive approach doesn't work basically at all。这是因为@namespace将url指定为集合，前缀只是它的内部名称。

一旦我弄清楚地狱命名空间是如何工作的，我可能会稍后重新回答这个问题 - 这不是我以前真正需要的东西，但这是我应该知道的 - 特别是现在。 / p>

答案很长：对吗？我想？

超越CSS3中的命名空间......

https://drafts.csswg.org/selectors-4/

对于计划中的:matches()选择器，您需要关闭，但是，您仍然需要明确说明您想要的每个标记。您可以将所有标记分组，而不必为每个标记重复整个选择器。

你也可以用:scope来做某事，但是，我并不清楚它到底在做什么。

就个人而言，我发现基于标签的选择在更改浏览器默认值和页面的单独表格之外有点不好（我老实说它仍然过度使用，因为他们要做得多快以及事实{{1}使他们减少200倍的可怕性...加上我的工作主要是将纸张/访问表单转换为Web表单，这意味着我实际上正在使用大量实际表格数据）。您应该明确地为您的所有标记提供默认布局，然后使用类对它们进行分组。

顺便说一下，属性选择器不能替换类。他们要扩展精度。不要滥用它们。

编辑：因为有关于我最后一行意味着什么的问题......

table-layout:fixed是一个非常有毯子的选择器，它会击中标签的每个实例。因此，它在语义上意味着“这些是此标记的默认设置”。
tagname表示“此特定元素”，#id表示“此类中的任何一个”。前者与您可以获得的具体相同，而后者最初被添加为仅针对某些元素的方式。因此，这些是你的主力选择器，它们是最高性能和最具语义正确的样式。
.class以增加特异性。假设您只想使用http链接：[attribute]。另一个用途是速记，最好的例子是a[href^="http:"]{display:none;}的隐藏垫片。此外，您可以将它用于快速和肮脏的黑客 - 比如你注意到图像偏离了两个像素。您可以让浏览器通过[hidden]{display:none;}修复它，而不是在图像编辑器中重新定位。
但是，无论您如何使用它，它都是 合并样式的一种形式，数据 即可。合并样式和数据通常是一件坏事，因为数据通常会在数据类型上发生变化，因此所需的样式不会。因此，你应该避免这样做，除非它过于方便而不是。

Answer 2

基于css selectors，没有。

但您可以使用属性my-contact[attribute^="something"]

来获取此内容

Answer 3

不幸的是，没有选择器可以做到这一点。但是，您可以使用jQuery .data（）方法来检索使用data- *属性定义的数据。您只需要使用在破折号后分配的名称来定位数据元素。这将作为字符串传递给data（）方法。

<强> HTML

<div id="foo" data-bar="abc"></div>

<强>的jQuery

var yourdata = $('#foo').data('bar') //abc

是否有CSS选择器来选择以某些字母开头的html元素？

3 个答案: