在 CSS 中，类选择器以一个点号显示： ( 推荐学习：CSS入门教程 )
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。
This heading will be center-aligned
This paragraph will also be center-aligned.
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
立即学习“前端免费学习笔记（深入）”；
和 id 一样，class 也可被用作派生选择器：
.fancy td {color: #f60;background: #666;}
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
元素也可以基于它们的类而被选择：
td.fancy {color: #f60;background: #666;}
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。
还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。
以上就是css的类选择器是怎么样的（代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614795.html赞 (0)打赏微信扫一扫
支付宝扫一扫
关于作者
CSS的属性选择器使用详解（css入门教程）上一篇 2025年12月24日 04:34:19CSS的id选择器怎么定义下一篇 2025年12月24日 04:34:31相关推荐
CSS的id选择器怎么定义
CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 ( 推荐学习：CSS入门教程 ) 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色： 立即学习“前端免费学习笔…
CSS的属性选择器使用详解（css入门教程）
对带有指定属性的 HTML 元素设置样式。 ( 推荐学习：CSS入门教程 ) 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。 注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择…
css如何插入样式表
如何插入样式表 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种： 外部样式表 ( 推荐学习：CSS入门教程 ) 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使…
CSS怎样缩进文本？
CSS 文本属性可定义文本的外观。 缩进文本 把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。 ( 推荐学习：CSS入门教程 ) CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。 立即学习“前端免费学习笔记（深入）”； 通过使用 tex…
在CSS中字体加粗要怎么做？
字体加粗 font-weight 属性设置文本的粗细。 使用 bold 关键字可以将文本设置为粗体。 ( 推荐学习：CSS基础教程 ) 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变…
CSS的表格边框使用什么属性设置
表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。 ( 推荐学习：CSS入门教程 ) 下面的例子为 table、th 以及 td 设置了蓝色边框： table,th,td{border:1px solid blue;}FirstnameLastnameBillGatesSt…
CSS框模型概念介绍
CSS框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述 ( 推荐学习：CSS基础教程 ) 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距…
清除浮动的css写法有哪些
本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码，非常不错，具有一定的参考借鉴价值，,需要的朋友可以参考下 一、float（浮动）是什么 float 属性定义元素在哪个方向浮动。 float:left 元素向左浮动。 float:right 元素向右浮动。 立即学习“前端免费学习笔…
css如何实现表格实线
利用在css设置表格实线： 代码如下: table{border-collapse:collapse; /*表示将单元格中各小格之间的空隙进行合并*/border:1px #00F solid; /*定义边框样式*/} 示例： 无标题页table { border-collapse: collaps…
css样式属性是什么
推荐教程：CSS教程 简介 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 …
CSS滤镜和混合模式处理的图片如何上传下载？
一、使用CSS滤镜和混合模式在线PS（推荐学习：CSS视频教程） 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果，例如CSSgram项目，内置众多图像处理效果，部分效果示意如下缩略图： 进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果： 立即学习“前端免费学习笔记…
css隐藏元素的几种方法中可以触发点击事件的是？
css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法。 css隐藏元素的方式： 1、display:none; .box{ display: none;} 最简单也最粗暴的方法就是设置元素的display属性为none。 立即学习“前端免费学习笔记（深入）”； 设置为dis…
为什么把css放到顶部
原因： CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级，更关键的是浏览器的渲染机制。 最理想的情况，我们希望浏览器逐渐的渲染下载好的CSS，将页面逐渐的展现给用户。但是浏览器为了避免样式变化时重新渲染绘制页面元素，会阻塞内容逐步呈现，浏览器等待所有样式加载完成之后才一次性渲染呈现页面。 如…
css相对定位什么意思
相对定位（relative）意思：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 扩展知识： 绝对定位（absolute）意思是：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom…
什么是css盒子模型？
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。它又称为框模型 (Box Model) ，是由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素组成的（如下图所示）。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子…
什么是css的行内式？
行内样式，就是将css样式代码写在具体网页中的一个html标签元素内；行内样式要在特定的html标记内使用，使用style属性来设置特定html标记的样式。比如： 特点： 1）、行内样式放在代码中的HTML元素中。 2）、使用行内样式时，样式只会影响你选择的元素。 3）、行内样式没有选择器 立即学习…
微信扫一扫 
支付宝扫一扫 
