以下以数字开头的 CSS 类名不会生效:

.1st{
color: red;
}

一个合法的 CSS 类名必需以下面其中之一作为开头:

  • 下划线 _
  • 短横线 -
  • 字母 a-z

然后紧跟其他 _- 数字或字母。

用正则表示,一个合法的 CSS 类名为:

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

另,根据 CSS 标准 中的描述,如果类名开头是短横线 -,第二个字符必需是下划线 _ 或字母,但实测发现,除了提及的两个,紧跟另一个短横线也是生效的。

以下是测试代码及结果:

<p class="1st">should apply red color</p>
<p class="-1foo">should apply red color</p>
<p class="-_foo">should apply red color</p>
<p class="--foo">should apply red color</p>
<p class="-foo">should apply red color</p>
<p class="foo">should apply red color</p>
.1st {
color: red;
}
.-1foo {
color: red;
}
.-_foo {
color: red;
} .--foo {

color: red;

} .-foo {

color: red;

}

.foo {

color: red;

}

不同类名实际效果

相关资源

CSS 类名的问题的更多相关文章

  1. 在jquery中怎么使用css类名和id来获取元素?

    在jquery中,你可以很容易的使用CSS类名和id类获取元素. 例如: 1.ID:#id $('#idA')——选择id为idA的所有元素,不管元素的标签名如何. $('div#idA')——选择i ...

  2. [转]CSS 类名的单词连字符:下划线还是横杠?

    问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...

  3. CSS 类名的单词连字符:下划线还是连接符?

    本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎 问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.s ...

  4. 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器

    一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...

  5. 控制文本和外观------CSS Binding(CSS类名绑定)

    <style> .myColor{color:red;font-size:13px} .yourColor{color:green;font-size:34px}</style> ...

  6. CSS类名命名规则

    CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 ...

  7. css类名大全以及其他关键词

    标签 abbr 缩写的标记 token-based-auth-backend  后端 token-based-auth-frontend  前端 signin 登陆  Sign in / Sign u ...

  8. css类名的使用

    ` Document .box { color: rgba(255, 0, 0, 1) } .box .box2 { color: rgba(0, 128, 0, 1) } .box.box2 { c ...

  9. jQuery CSS 添加/删除类名

    addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例 一 :为匹配的元素加上 'sele ...

随机推荐

  1. Cg入门20:Fragment shader - 片段级模型动态变色(实现汽车动态换漆)

    Unity 一个面片的最大顶点数为65524,所以大于这个数,请拆分成多个面片 1.获取汽车x轴的最大值和最小值[-2.5,2.5]+R watermark/2/text/aHR0cDovL2Jsb2 ...

  2. C#.NEt-GDI+中的Pen測试

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. iOS开发——常见BUG——导航控制器中的子控制器设置StatusBar状态失效的问题

    iOS9之前控制StatusBar的两种方式: 第一种方式:全局控制StatusBar 1. 在项目的Info.plist文件里设置UIViewControllerBasedStatusBarAppe ...

  4. Bing必应地图中国API入门讲座之八:显示驾车路线

    Bing必应地图中国API入门讲座之八:显示驾车路线 2011-05-24 14:47:36|  分类: Bing&Google|字号 订阅     这篇文章非常值得纪念,因为我是在Googl ...

  5. Java 高级数据结构 —— Properties

    1. Properties Properties 是 Java 的内置实现: public class Properties extends Hashtable<Object,Object> ...

  6. C 的数据类型和基本类型转换方式

    C中的类型分为 整数数据类型 浮点类型 void类型 基本类型符号: 默认数值为十进制,例如:10,20 以0开头的数值为八进制,例如:010,020 以0b开头的数值为二进制,例如:0b0011 以 ...

  7. bzoj 1598: [Usaco2008 Mar]牛跑步【A*K短路】

    A*K短路模板,详见https://blog.csdn.net/z_mendez/article/details/47057461 算法流程: 把有向图全建成反向边,跑一遍所有点到t的最短路记为dis ...

  8. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照(6)设置 App 预览海报帧

    App 预览海报帧仅在 App 状态为可编辑时,才能被编辑. 必要职能:“帐户持有人”职能.“管理”职能.“App 管理”职能或“营销”职能.请参见职能权限. 在首页上,点按“我的 App”,选择您的 ...

  9. 小记 vue 打包(build)需要注意的一些事

    记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 ...

  10. 指向“”的 script 加载失败

    今天遇到了一个非常奇怪的问题:在某个同时的电脑上,所有浏览器无法打开某个页面,F12查看控制台,发现有一个黄色的 指向“xxxx.js”的 <script> 加载失败 的提示.该外部js文 ...