关于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中的类名问题的介绍的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:42:36
下一篇 2025年12月24日 04:42:44

相关推荐

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

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

    好文分享 2025年12月24日
    000
  • css如何实现网页背景动态渐变效果

    html部分: 渐变——天际线 渐变——天际线 实现背景颜色渐变不需要在HTML(结构)部分做任何操作 这里加了一行字,方便显示效果; (推荐教程:CSS教程) CSS部分: body{ margin: 0; padding: 0; font-family: “montserrat”; backgr…

    2025年12月24日
    000
  • css如何解决图片底部空白缝隙问题

    问题描述: 引用图片时下方总出现空白,情况如下图所示。 css代码: .img-box { border: 2px solid red; width: 550px; } @@##@@ 原因分析: 立即学习“前端免费学习笔记(深入)”; 行内块元素会和文字的基线对齐。 (推荐教程:CSS教程) 解决方…

    2025年12月24日
    000
  • css实现文字竖排效果

    html中文字的默认排列是横向排列的,但一些特殊情况下是需要文字竖向排列的。 单行文字竖向排列 .onecn{ width: 20px; margin: 0 auto; line-height: 24px; } (推荐教程:CSS入门教程) 立即学习“前端免费学习笔记(深入)”; .oneen{ w…

    2025年12月24日 好文分享
    000
  • css实现文本图标对齐的方法

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

    2025年12月24日 好文分享
    000
  • css如何实现三栏布局

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

    2025年12月24日
    000
  • css如何使用Rem布局实现自适应效果

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

    2025年12月24日 好文分享
    000
  • 如何使用css来画一个棒棒糖

    先来看一下效果图: (相关视频教程推荐:css视频教程) CSS代码: 棒棒糖 用css画一个棒棒糖 要求:立即学习“前端免费学习笔记(深入)”; Linfo.ai Linfo AI 是一款AI驱动的 Chrome 扩展程序,可以将网页文章、行业报告、YouTube 视频和 PDF 文档转换为结构化…

    2025年12月24日 好文分享
    200
  • 如何转换css元素的显示模式

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

    2025年12月24日
    200
  • css如何实现ul和li横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法: float:left 这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高。 display:inline-block 即把li变为行内…

    2025年12月24日
    000
  • css如何实现隐藏滚动条

    移动端 移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none;} (推荐教程:CSS教程) PC 端 PC …

    2025年12月24日 好文分享
    000
  • 如何利用css实现放大缩小关闭效果

    先来看一下效果图: (推荐教程:CSS教程) 代码示例如下: 缩小 放大 关闭 export default {data() {return {flag_fullpageWebView: 1};}}; .windowAction {margin-top: -5px;-webkit-app-regio…

    2025年12月24日
    000
  • CSS中的&是什么意思

    本篇文章介绍了css中&的意思,希望对学习css的朋友有帮助!&是sass的语法,表示嵌套的上一级,css中并没有&。 CSS中的&是什么意思 如源码: ( 推荐学习:CSS教程 ) ul{ margin-bottom: 20px; & >li { ma…

    2025年12月24日
    000
  • css实现动画性能优化

    一、使用css,jquery,canvas制作动画 1、Canvas 优点:性能好,强大,支持多数浏览器(除了IE6、IE7、IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形; 缺点:依赖于HTML,只能通过脚本绘制图形,没有实现动画的API(依靠事件和定时器更新);由于在 ca…

    2025年12月24日
    000
  • 详解CSS中position属性的用法

    本篇文章介绍了css中的position属性的用法、分类以及使用效果展示,希望对学习css的朋友有帮助! 详解CSS中position属性的用法 一、position属性有什么作用? CSS position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left属性则…

    2025年12月24日 好文分享
    200
  • css如何解决不同浏览器下文本兼容的问题

    目标: css实现不同浏览器下兼容文本两端对齐。 在 form 表单的前端布局中,我们经常需要将文本框的提示文本两端对齐,例如: 解决过程: 立即学习“前端免费学习笔记(深入)”; 1、首先想到是能不能直接靠 css 解决问题 css .test-justify { text-align: just…

    2025年12月24日 好文分享
    000
  • css如何实现客服悬浮效果

    我们首先来看一下效果图: (推荐教程:CSS教程) 接着我们来看一下实例代码: html 立即学习“前端免费学习笔记(深入)”; 在线客服 QQ:1846492969 QQ:1846492969 QQ:1846492969 QQ:1846492969 QQ:1846492969 css .sideB…

    2025年12月24日
    000
  • 不能忘却的悼念:将网页背景变为黑白色调教程

    不能忘却的悼念:为表示对本次重大疫情逝去的人们哀悼,创想鸟将网站整体变为了黑白色,以表示对逝者的悼念。 下面将代码分享给大家: 黑白色CSS代码 html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filt…

    2025年12月24日
    000
  • 关于css选择器的详细介绍

    什么是选择器? 选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一…

    2025年12月24日
    000
  • css中device-width与width有什么区别

    1、device-width 定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为375*667…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信