css 中的class是什么意思!

发布网友 发布时间：2022-04-06 13:33

我来回答

共7个回答

懂视网 时间：2022-04-06 17:54

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

.1st{
 color: red;
}

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

1、下划线 _

2、短横线 -

3、字母 a - z

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

（推荐教程：CSS入门教程）

用正则表示，一个合法的 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视频教程

热心网友 时间：2022-04-06 15:02

class是类选择器，允许以一种独立于文档元素的方式来指定样式。

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

扩展资料

 class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

例如：如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：<p class="important warning"> This paragraph is a very important warning. </p> 这两个词的顺序无关紧要，写成 warning important 也可以。

假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。

就可以写作：.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

参考资料来源：百度百科-类选择器

热心网友 时间：2022-04-06 16:20

1、class属性命名后，可以在css中设置标签的样式，而且class属性具有重复性和多样性。下面做一个演示，首先新建一个html文件，这里输入三个h1标签：

2、接着给第一个h1标签设置class属性，在style中设置样式，这里的class就叫“h1”：

3、打开浏览器查看效果，相比没有设置class属性的h1标签，设置class的h1标签变成了红色，字体也变大了：

4、接下来演示class的复用性，这里给三个h1标签都设置class属性：

5、打开浏览器，查看效果，发现三个h1标签都变大变红了。以上就是css中class的用法演示：

热心网友 时间：2022-04-06 18:12

热心网友 时间：2022-04-06 20:20

参考资料：http://www.w3school.com.cn/css/css_selector_class.asp

热心网友 时间：2022-04-06 22:44

热心网友 时间：2022-04-07 01:26