关于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;}

结果如图:

dae8fed184b49f43d101aaeeb1ee31c.png

相关视频教程推荐:css视频教程

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:38:16
下一篇 2025年12月24日 04:38:34

相关推荐

  • css实现文本两端对齐的方法

    本篇文章介绍了使用css实现文本两端对齐的效果,具有一定的参考价值,感兴趣的朋友可以看看。 css实现文本两端对齐的方法 说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端…

    2025年12月24日
    000
  • 如何改变css伪元素的样式

    本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一、CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 selector…

    2025年12月24日
    000
  • css实现文字过长显示省略号

    本篇文章介绍了css实现文字过长显示省略号的方法,具有一定的参考价值,希望对学习css的朋友有帮助! 一、CSS样式 解决文字过长显示省略号问题 1、一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。 text-…

    2025年12月24日 好文分享
    000
  • css制作轮播图

    下面是style部分: *{margin:0;padding:0;} a{text-decoration:none} li{list-style:none;} 设计宽度不要超过轮播图片的总宽度,再加上第一张图片的宽度(加第一张图片的宽度是为了轮播效果看得见)我的是1500宽度和200的高度,再设置溢…

    2025年12月24日
    000
  • 给你的网页弹窗加个遮罩

    本篇文章为你介绍使用css实现网页遮罩效果,主要是通过控制两个盒子的显示层级,控制遮罩层的背景色和显示透明度来达到遮罩效果。希望对学习css的朋友有帮助。 给你的弹窗加个遮罩 遮罩层效果相信是许多开发需求时候经常会碰到的一个情况,实现遮罩层效果的方式有很多种,下面介绍最简单的一种,利用CSS来实现遮…

    2025年12月24日
    000
  • css如何清除浮动

    1、给父级元素设置高度 效果图: 代码: * { padding: 0; margin: 0; } .header { height: 30px; line-height: 30px; background-color: #333; } .header a { color: #fff; text-d…

    2025年12月24日 好文分享
    000
  • 关于CSS中display:flex与inline-flex属性的详细介绍

    flex介绍 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示 (推荐学习教程:CSS教程) 立即…

    2025年12月24日
    000
  • css如何清除默认样式并设置公共样式

    通常的清除默认样式: *{ margin:0; padding:0}li{ list-style:none}img{ vertical-align:top; border:none} (推荐教程:CSS教程) 设置默认字体 body,button, input, select, textarea /…

    2025年12月24日
    000
  • css如何实现流程导航效果?有哪几种方法?

    方法一:利用裁剪(该方法ie下不支持) 利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来   .nav-box { display: flex; list-style: none; font-size: 14px; } .nav-box l…

    2025年12月24日
    000
  • css如何实现图片抽屉式效果

    首先,我们来看一下效果: 这个效果实现原理很简单:只要你掌握css3动画和过渡相关知识就行,不用js代码; (推荐教程:CSS入门教程) HTML代码: 立即学习“前端免费学习笔记(深入)”; 国际美妆抢先看 @@##@@ 女神标准大讨论 @@##@@ 吃货也能越吃越瘦 @@##@@ 连衣裙抢头条 …

    2025年12月24日
    000
  • css如何进行空格处理

    white-space 属性 CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。 1、white-space: normal white-space属性的默认值为normal,表示浏…

    2025年12月24日
    000
  • css如何实现始终将footer固定在底部

    目标: 把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。 (推荐教程:CSS入门教程) 实例: document #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50…

    2025年12月24日
    000
  • CSS定位怎么理解?

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。      ( 推荐学习:CSS入门教程 ) 定位的基本思想…

    2025年12月24日
    000
  • CSS外边距如何定义

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。 CSS margin 属性                                         ( 推荐学习:C…

    2025年12月24日
    000
  • CSS怎么设置链接样式

    我们能够以不同的方法为链接设置样式。 设置链接的样式                          ( 推荐学习:CSS入门教程 ) 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。 链接的特殊性在于能够根据它们所处的状态来设…

    2025年12月24日
    000
  • CSS绝对定位详解

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位                  …

    2025年12月24日
    000
  • CSS浮动怎么做

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS 浮动,在 CSS 中,我们通过 float 属性实现元素的浮动。                      ( 推荐学习:CSS…

    2025年12月24日 好文分享
    000
  • CSS轮廓(outline)是什么

    轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。                           ( 推荐学习:CSS教程 ) CSS 轮廓(outline) 轮廓(outline)是绘制于元素…

    2025年12月24日
    000
  • 13个加速开发效率的现代CSS框架

    本文将向你介绍一系列顶级css框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧! 专注于 CSS 的框架 让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScr…

    2025年12月24日 好文分享
    000
  • CSS的相邻兄弟选择器何时用

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 选择相邻兄弟                  ( 推荐学习:CSS教程 ) 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信