上个博客末尾展示了css的代码结构和css的一个样式选择器-----
标题标签选择器
其功能为——根据标签名称定义所有将要使用的这种标签都采用定义的样式。
其格式为 标签名{ 属性1;属性2;属性3; }
今天将展示css其他的选择器:类选择器,id选择器,后代选择器,分组选择器,通配选择器及其他们的优先级。
类选择器
每一个标签都可以有一个class属性,此属性常用来分类标签。定义格式为
.标签属性值{
声明1;
声明2;
声明2;
}
例
.divText{
background-color: crimson;
}
注意 :定义class选择器的名称时不能以数字开头
在使用时(以div标签为例)
id 选择器
每一个标签都可以有一个属性id 。
id标签属性的属性值不能以数字开头;id标签属性的属性值在HTML文档中必须唯一;class标签属性的属性值可以不唯一;
定义格式为
#标签属性值{
声明1;
声明2;
声明3;
}
例
#divcol{
background-color: forestgreen;
}
使用时(以div标签为例)
后代选择器
我们可以定义在某一标签里的嵌套标签使用的样式属性。
定义格式
父标签1 子标签1{
声明1;
声明2;
声明3;
}
例
div span{
font-size: larger;
color: #DC143C;
}
父当选择器与子选择器间以空格分隔 代码中有以下格式时
div里span中元素的font -size为larger ,color为#DC143C
分组选择器
如果多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器抽取出来以简化CSS样式代码
该类选择器的选择器名由多个选择器组成,使用逗号分隔,在其语法如下
选择器1,选择器2{
声明1;
声明2;
}
div,span{
font-size: 3;
font: "微软雅黑";
}
通配符选择器
通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器,所有的标签都采用此样式,
定义语法如下
*{
声明1;
声明2;
}
优先级问题
id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器>通配符选择器
注意:选择器优先级不考虑选择器的先后顺序
css的样式多种多样,以上这些只是让我们知道了css的用法和能读懂css,想要做出来精彩的网页还需要我们学会使用css的多种样式,接下来我会整理一份常用的简单样式。同时网上的css使用手册有许多,我们可以通过查阅使用手册得到css的多种样式属性使用。