css 中的class是什么意思!

html-css08

css 中的class是什么意思!,第1张

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} 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

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

CSS中常用的选择器：（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素 (一)基本选择器1.标签选择器：通过标签名获取元素 权重：0001 （此种选择器影响范围大，建议尽量应用在层级选择器中。）2.class选择器：通过 . 类名获取元素权重：0010 （通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）3.id选择器：通过 # id名获取元素 权重：0100 （通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）4. * 通配符选择器：获取到页面的所有元素5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到 (二)层次/关系选择器 （主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代例：p a { color:red}2.子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代例：ul>li { line-style: none}3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的） 例： a+a { }4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素 例： li~li { }(三）动态伪类选择器1. a:link 锚链接被访问前添加样式2. a:visited 锚链接被访问后添加样式3. e:hover 鼠标悬停在元素上添加样式4. e:active 鼠标点击元素时添加样式5. :focus 表单元素被聚焦时，添加样式(四)目标伪类选择器语法： 目标:target {属性：属性值} 被选中的目标添加样式目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式 (五)ui状态伪类选择器1. :enabled 可用的表单元素添加样式2. :disabled 不可用的表单元素添加样式(disabled )3. :checked+E 被选中的表单元素添加样式(六)结构伪类选择器1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子n的用法：(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”） (3) -n+5 选中1-5(4)p:nth-child(-n+3):nth-child(n+2) 2-3个4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子9. E:empty 获取到空的E元素（注：连空格都不能有）(七)属性选择器1. E[attr] 拥0有attr属性的E元素添加样式 如div[class] 2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]3. E[attr*="val"] attr属性值 包含 val的E元素添加样式 如ul[class="c"] 指class类名中包含有c字母的E元素4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式(八)伪元素1. E::before给E元素添加第一个子元素 （前面） 2. E::after 给E元素添加最后一个子元素（后面）3. E::first-letter给E元素第一个字添加样式4. E::first-line给E元素第一行添加样式 5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

&表示在嵌套层次中回溯一层，即

&:before相当于.clearfix:before，&:after相当于.clearfix:after。

而:before和:after是CSS中的伪元素，表示在应用clearfix类的元素前和后插入指定内容。