正则css

最新推荐文章于 2024-02-17 18:38:07 发布
最新推荐文章于 2024-02-17 18:38:07 发布
阅读量496 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LTOAP/article/details/98850325
版权

今天学习css的时候遇到一个表达式：[class*=“col-”] {…}，看半天没看明白，后来查阅了资料发现这是一个正则的css表达式，意思是对所有的以col-开头的都遵循括号内的样式。
举个例子：

<head>
<style>
[class*="col-"] {
float:center;
padding:15%;
}
.col-1{width：8.33%；}
.col-2{width:16.66%}
...
...
</style>
</head>
<body>

<div class="col-2">
<h1>The way<h1>
<p>Resize the browser window to see how the content respond to the resizing</p>
</div>

上面p标签和h标签继承了css正则表达式样式。

LTOAP
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 正则表达式
tc_gogo的博客
04-12 2253
正则表达式 正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。 RegExp声明两种方式： 1. 构造函数 var re = new RegExp();//RegExp是一个对象,和Aarray一样 //但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去 ...
正则
weixin_43963309的博客
03-31 130
正则验证 验证汉字 字母 正数 /([\u4e00-\u9fa5]+)|([a-zA-Z]+)|(^[+]{0,1}((\d+)|(\d+\.\d+))$)/ 验证汉字 字母 大于0的数 /([\u4e00-\u9fa5])|([a-zA-Z])|(^[+]{0,1}(([1-9]+)|(\\d+\\.\\d+))$)/ 匹配汉字：[\u4e00-\u9fa5] 匹配字母：[a-zA-Z] ...
CSS选择器中的正则表达式使用
01-21
一 是的，CSS也有正则（阿门） CSS装逼两利器：矩阵和正则。 其实呢，我们也不必惊讶，CSS毕竟也是一门语言，而且正则本来就是有利于某个具体语言之外的东西。 二 正则表达式的一些通用规则 无论什么语言，正则表达式的规则都是通用的，差别可能在于书写的形式上。 正则是个很深的话题，真要说开，可以写一本厚厚的书！记住都很难，像我要用的时候，就百度….. 其中，有一些关键的字符，有着特定的含义，代表了正则表达式世界的规则。 例如： 字符^表示字符串开始位置匹配； 字符$表示字符串结束位置匹配； 字符*表示字符串任意位置匹配； 字符i表示字符串匹配不区分大小写；
CSS选择器中的正则表达式
热门推荐
taotaomin99的博客
06-18 1万+
放张头图来放松放松哈哈哈哈哈哈哈哈哈哈哈哈~一 是的，CSS也有正则（阿门）CSS装逼两利器：矩阵和正则。其实呢，我们也不必惊讶，CSS毕竟也是一门语言，而且正则本来就是有利于某个具体语言之外的东西。二 正则表达式的一些通用规则无论什么语言，正则表达式的规则都是通用的，差别可能在于书写的形式上。正则是个很深的话题，真要说开，可以写一本厚厚的书！记住都很难，像我要用的时候，就百度…..其中，有一些关键
CSS选择器正则表达式的使用
weixin_43487782的博客
09-16 1946
之前项目中有一个功能，需要根据图片URL后缀的扩展名匹配相应的图标，当时是用JS的switch case实现的，因为switch case可以进行多对一匹配，而对象key value只能进行一对一匹配。 今天偶然看到CSS也能进行正则匹配，并且专门就是针对这种场景的，这样以后直接用CSS就行了，性能肯定有所提升。 如果还有同学不明白CSS选择器正则匹配，看看下面几个例子应该马上就能明白了。 /* 匹配所有带href属性的标签 */ [href] {padding-left: 18px;} /* 匹配href
正则表达式和Xpath和CSSselector（对于选取网页元素xpath比较好用）
weixin_42166745的博客
10-04 2192
一.正则表达式： 基本符号： ^  表示匹配字符串的开始位置  (例外  用在中括号中[ ] 时,可以理解为取反,表示不匹配括号中字符串) $  表示匹配字符串的结束位置 *  表示匹配 零次到多次 +  表示匹配 一次到多次 (至少有一次) ?  表示匹配零次或一次 .  表示匹配单个字符  |  表示为或者,两项中取一项 (  ) 小括号表示匹配括号中全部字符 [  ] 中...
javascript+css+正则表达式
03-25
在IT领域，JavaScript、CSS和正则表达式是构建网页和Web应用不可或缺的三大核心技术。这份"javascript+css+正则表达式"的chm帮助文档集合，为初学者提供了全面的学习资源，涵盖了这些主题的基础知识和进阶技巧。 ...
5.2 正则表达式 RegExp
01-08
距离5.1 有一个星期了，这一个星期主要是花在了练习CSS上，仿写了一个淘宝首页，今天接着看高级程序设计部分： 5.2 RegExp 类型1.使用字面量定义2.使用构造函数 RegExp3.RegExp 实例属性：4.RegExp 实例方法：5.使用...
CSS_information.rar_c# css_c#css_c#的css_正则表达式
09-21
在这个“CSS_information.rar”压缩包中，包含了C#与CSS的相关知识以及正则表达式的系统教程。 C# CSS：C#和CSS的结合主要体现在.NET Framework中，特别是ASP.NET Web应用程序开发。在这些应用中，开发者可以使用C#...
js 得到文件后缀(通过正则实现)
12-10
这里，我们通过正则表达式来实现这一功能。正则表达式是处理字符串的强大工具，能够帮助我们匹配、查找和提取特定模式。 在给定的代码片段中，我们看到一个名为`validate`的函数，它使用了正则表达式来获取文件的...
巧用CSS属性值正则匹配选择器(小技巧)
11-21
属性值正则匹配选择器包括下面3种： [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字符匹配，而非单词匹配。其中，尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。 利用这些选择器，纯CSS就可以做出很炫酷的功能。 <!– more –> 显示超链接的小图标和文件类型图表 利用[attr^="val"]前匹配选择器可以判断<a>元素的链接地址类型，以用来显示对应的小图标。显示超链接的小图标的样式如下： [href] {padding-left: 18px;} /* 链接
CSS学习
最新发布
2301_80094706的博客
02-17 1729
使用字面量语法使用RegExp构造函数创建正则表达式对象匹配// 'g' 标志表示全局匹配// 输出: ['abc', 'abc', 'abc']替换// 输出: 'Hello, JavaScript!搜索// 输出: 7分割// 输出: ['apple', 'banana', 'orange']
超级字符串内class正则匹配替换 可以用于css modules
徐同保的专栏
11-29 1150
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
css选择器[class*= col-]
24min的博客
08-05 1万+
[class*= col-]  代表包含  col-  的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。 [class^=col-]  代表 以 col- 开头的类名，比如说 col-md-4 [class$=col-] 代表以 col- 结尾的类名   这是不是和正则有点像呢？？ ^[0-9]  代表 匹配以数字开头的 而 [0-9]$ 代表...
QT进行字符串正则内容提取
凌漾的博客
12-29 1598
QT5 正则提取字符串
在CSS中设置id以相同字符串开头的正则表达式样式设置
pdw521的专栏
02-06 4254
在CSS中设置id以相同字符串开头的正则表达式样式设置，之前没有太多注意正则表达式在css中的应用。现在记下来希望更给需要的人提供参考。 正则表达式中的一些通用规则： 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表示字符串任意位置匹配 4 i表示字符串匹配不区分大小写 5 g 表示字符串全局匹配 css属性选择器与正则表达式：
用html来操作css样式 正则表达式
love_zjl的博客
02-22 1733
操作元素的CSS样式：用style来表示 正则表达式： /* 正则表达式的创建方式： "" 方式1： /正则表达式/模式 方式2： new RegExp("正则表达式",模式); 正则表达式对象常用的方法： test()  使用正则对象去匹配字符串  如果匹配成功返回ture，否则返回false. exec()  根据正则表达式去查找字符串符合规则的内
js正则匹配class和css
07-16
如果你想要同时匹配类名和对应的 CSS 样式，可以使用正则表达式来处理。 下面是一个示例，展示如何使用正则表达式匹配类名和对应的 CSS 样式： ```javascript const input = ` .class1 { color: red; font-size: 12px; } .class2 { background-color: blue; font-weight: bold; } .class3 { font-family: Arial, sans-serif; font-size: 14px; } `; const regex = /\.([a-zA-Z0-9_-]+)\s*{([^}]+)}/g; let match; const classAndStyles = {}; while ((match = regex.exec(input)) !== null) { const className = match[1]; const cssRules = match[2]; classAndStyles[className] = cssRules; } console.log(classAndStyles); ``` 这个示例中，我们定义了一个包含类名和对应 CSS 样式的字符串 `input`。 然后，我们使用正则表达式 `\.([a-zA-Z0-9_-]+)\s*{([^}]+)}` 进行匹配。其中 `\.` 表示匹配 `.` 字符，`([a-zA-Z0-9_-]+)` 表示匹配一个或多个字母、数字、下划线和破折号，并将其捕获为类名，`\s*` 表示匹配零个或多个空格，`{([^}]+)}` 表示匹配一对大括号内的内容，并将其捕获为 CSS 样式。 接下来，我们使用 `while` 循环和 `regex.exec(input)` 来执行匹配操作，并将每个匹配结果存储在 `match` 变量中。 在循环中，我们从每次匹配结果中提取类名和对应的 CSS 样式，并将它们存储在 `classAndStyles` 对象中，其中类名作为键，CSS 样式作为值。 最后，我们输出 `classAndStyles` 对象，它包含了所有匹配的类名和对应的 CSS 样式。 请注意，上述示例中使用了循环和正则表达式的 `exec()` 方法来实现全局匹配。你可以根据自己的需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值