类选择器

类选择器允许以一种独立与文档元素的方式来制定样式

例如: .class{}(注意是点开头的哦,这是类选择器的标志,点后面是属性名,大括号里面就是具体的设置)

下面我们就来简单举例:

html 文件:

<div class="div">
    php中文网
</div>

css 文件:

.div{color: cadetblue;
}

这样就可以实现定制效果:

前面我们还接触过,将类选择器结合元素选择器来使用.下面再添加一个:

<h1 class="div">php中文网</h1>

下面我们将 css 文件如下修改:

h1.div{color: cadetblue;
}

这样在类选择器前面加了元素描述以后,这个.div 就只会对 h1 起作用.

下面我们来看看具体的效果:

下面我们要讲的就是多类选择器:.class.class{} 这个在先前我们没有接触过.下面我们就来边写边感受: html 文件列出几个 p 字段,到时好比较:

<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>

css 文件没一个选择器修改一处设置,地一个颜色蓝黑,第二个字体大小 20px,第三个字体样式斜体:

.p1{    color: cadetblue;
}.p2{    font-size: 20px;
}.p3{    font-style: italic;
}

下面就是效果截图:

下面我们就来使用多类选择器:

这里就只需要将 css 文件中 p3 改为 .p1.p2 就好,另外在 html 引用时将第三个 p 标签 class 进行修改: css:

.p1.p2{    font-style: italic;
}

html:

<p class="p1 p2">php中文网</p>

下面就是结果图:

这里我们看出,第三个段即有 p1 颜色的修改,也有 p2 字体大小的修改,还有自己斜体的修改.这就是多类选择器的应用.