关于css中的类名问题的介绍

关于css中的类名问题的介绍

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

.1st{    color: red;}

登录后复制

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

1、下划线 _

2、短横线 –

3、字母 a – z

立即学习“前端免费学习笔记(深入)”;

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

(推荐教程:CSS入门教程)

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

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

登录后复制

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

以下是测试代码及结果:

should apply red color

should apply red color

should apply red color

should apply red color

should apply red color

should apply red color

.1st {  color: red;}.-1foo {  color: red;}.-_foo {  color: red;}.--foo {  color: red;}.-foo {  color: red;}.foo {  color: red;}

登录后复制

结果如图:

22cee288b22a4a04c78897c896fc980.png

推荐视频教程:CSS入门教程

以上就是关于css中的类名问题的介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2886301.html

(0)
上一篇 2025年3月10日 20:49:58
下一篇 2025年3月10日 20:50:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css中的content属性该如何使用

    content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。 1、插入纯字符 *{margin: 0;padding: 0;box…

    2025年3月10日
    100
  • css如何实现网页背景动态渐变效果

    html部分: nbsp;html>     渐变——天际线           渐变——天际线     登录后复制 实现背景颜色渐变不需要在HTML(结构)部分做任何操作 这里加了一行字,方便显示效果; (推荐教程:CSS教程) C…

    2025年3月10日
    200
  • css如何解决图片底部空白缝隙问题

    问题描述: 引用图片时下方总出现空白,情况如下图所示。 css代码: .img-box { border: 2px solid red; width: 550px; }    @@##@@ 登录后复制 原因分析: 立即学习“前端免费学习笔记…

    2025年3月10日
    200
  • css实现文字竖排效果

    html中文字的默认排列是横向排列的,但一些特殊情况下是需要文字竖向排列的。 单行文字竖向排列 .onecn{     width: 20px;      margin: 0 auto;      line-height: 24px;  }…

    2025年3月10日 编程技术
    200
  • css实现文本图标对齐的方法

    开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例: html部分:     @@##@@    xx测试对齐Style- 登…

    2025年3月10日 编程技术
    200
  • css如何实现三栏布局

    实现方法: 一、float浮动           .layout.float .left-right-center{ height: 100px; } .layout.float .left{ float: left; width: 30…

    2025年3月10日
    200
  • css如何使用Rem布局实现自适应效果

    为什么要自适应? 比如,对于一个移动端页面,设计师给的视觉稿画布宽 750,视觉稿中的一个黄色区块的尺寸是 702 x 300,并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样,根据布局视口宽度等比缩放。 在移动端我们一般…

    2025年3月10日 编程技术
    200
  • 如何转换css元素的显示模式

    通过设置元素的display属性实现转换 display取值:inline(行内)、block(块级)、inline-block(行内块级) (视频教程推荐:css视频教程) 下面这个实例就是将span的显示模式转换为块级,将div的显示属…

    2025年3月10日
    200
  • 如何利用css生成可控虚线

    目的: 生成如下图所示虚线 实现方式 实现方式,有的人用多个span生成,一个小圆点就是一个span,这样是可以,但是整个状态改变比较麻烦,有什么方式生成可以控制的虚线呢? 立即学习“前端免费学习笔记(深入)”; (视频教程推荐:css视频…

    2025年3月10日
    200
  • 如何利用css改变浏览器滚动条样式

    注意:该方法只适用于 -webkit- 内核浏览器 滚动条外观由两部分组成: 1、滚动条整体滑轨 2、滚动条滑轨内滑块 在CSS中滚动条由3部分组成 立即学习“前端免费学习笔记(深入)”; name::-webkit-scrollbar /…

    2025年3月10日
    200

发表回复

登录后才能评论