以下以数字开头的 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. 10.11无法打开Xcode6.4的解决方法

    前言 mac升级到10.11版本号并安装Xcode7.0Beta之后,Dock中的Xcode6.3图标上出现一个禁止符号,打开提示到App store更新最新版本号,更新到6.4之后问题依然,还是提示 ...

  2. Android基础新手教程——4.1.1 Activity初学乍练

    Android基础新手教程--4.1.1 Activity初学乍练 标签(空格分隔): Android基础新手教程 本节引言: 本节開始解说Android的四大组件之中的一个的Activity(活动) ...

  3. CSP 201612-4 压缩编码 【区间DP+四边形不等式优化】

    问题描述 试题编号: 201612-4 试题名称: 压缩编码 时间限制: 3.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一段文字,已知单词a1, a2, …, an出现的频率分别t1 ...

  4. javax.servlet.http.Part 文件上传

    编辑jsp页面: <html> <head> <base href="<%=basePath%>"> <title>My ...

  5. go16---select

    package main /* Channel Channel 是 goroutine 沟通的桥梁, goroutine是通过通信来进行内存的共享, 而不是通过内存的共享来进行通信,通过Channel ...

  6. Android实战技巧之八:Ubuntu下切换JDK版本【转】

    本文转载自:http://blog.csdn.net/lincyang/article/details/42024565 Android L之后推荐使用JDK7编译程序,这是自然发展规律,就像是4年前 ...

  7. Java 工具类 —— 定时器(Timer/TimerTask)

    import java.util.Timer; import java.util.TimerTask; public class Timer { .... public void schedule(T ...

  8. python-----列表生成式和列表生成器表达

    列表表达式: 程序一: 常规写法: L = [] for x in range(1, 11): L.append(x * x) print(L) #[1, 4, 9, 16, 25, 36, 49, ...

  9. SVN导出指定版本差异文件 ***

    当一个项目进入运营维护阶段以后,不会再频繁地更新全部源文件到服务器,这个时间的修改大多是局部的,因此更新文件只需更新修改过的文件,其他 没有修改过的文件就没有必要上载到服务器.但一个稍微上规模的项目文 ...

  10. 用nginx进行同一个服务器下多域名的负载均衡配置

    用nginx进行同一个服务器下多域名的负载均衡配置 Nginx进行http负载均衡的模块是upstream Upstream可以进行多个配置,这样的话可以灵活的配置站点,但是注意的是upstream后 ...