类选择器

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

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

下面我们就来简单举例:

html 文件:

php中文网

css 文件:

.div{color: cadetblue; }

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

QQ截图20161011175352.png

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

php中文网


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

h1.div{color: cadetblue; }

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

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

QQ截图20161011175440.png

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

php中文网

php中文网

php中文网

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

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

下面就是效果截图:

QQ截图20161011175511.png

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

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

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

html:

php中文网

下面就是结果图:

QQ截图20161011175559.png

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


Meneruskan pembelajaran
||
Title
php中文网

php中文网

php中文网

php中文网

php中文网

php中文网

serahkan Tetapkan Semula Kod
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!