正则表达式匹配属性选择器-CSDN博客

它们不存在，但是那会不会很酷？我不知道实现起来有多难，或者解析起来要花多大钱，但这不只是炸弹吗？

假设我有一堆元素，它们都具有相似的类名，它们具有某些共享的样式，但也需要单独的规则，例如：

<ul id="menu">
	<li id="menu-home"><a href="/">Home</a></li>
	<li id="menu-products"><a href="/products/">Products</a></li>
	<li id="menu-about"><a href="/about/">About</a></li>
</ul>

我可以在这些列表项上进行图像替换，以使用以下规则创建图形导航栏：

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

还不错，但是随着结构尺寸的增加， CSS也随之增加。如果结构很大，那么CSS就会变得冗长。更不用说每次添加新项目时我都必须手动对其进行编辑的事实。

但是，如果我能做到这一点怎么办：

#menu li[id%="/^menu-([a-z]+)$/"]
{
	background-image:url("$1.png");
}

现在，我的菜单样式可以无限扩展-我可以添加任何数量的新项目，而无需接触CSS ！

只是一个想法…

From: https://www.sitepoint.com/regex-matching-attribute-selectors/