CSS及其多种选择器-CSDN博客

本文链接：https://blog.csdn.net/zzu_wlan/article/details/81261074

昨天博文快结束的时候我展示了css的代码结构和css的一个样式选择器-----标签选择器；其功能为——根据标签名称定义所有将要使用的这种标签都采用定义的样式。其格式为标签名{ 属性1；属性2；属性3； }

今天我将展示css其他的选择器：类选择器，id选择器，后代选择器，分组选择器，通配选择器及其他们的优先级。

每一个标签都可以有一个class属性，此属性常用来分类标签。定义格式为

.标签属性值{
        声明1;
        声明2;
        声明2;
}
例
.divText{
    background-color: crimson;
	}

注意：定义class选择器的名称时不能以数字开头

在使用时（以div标签为例）<div class=" 标签属性值"> 表明此div的background-color为crimson

每一个标签都可以有一个属性id 。

id标签属性的属性值不能以数字开头；id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

定义格式为

#标签属性值{
        声明1; 
        声明2;
        声明3;
}
例
#divcol{
    background-color: forestgreen;
	}

使用时（以div标签为例） <div id=" 标签属性值 "> 表明此div的background-color为forestgreen

我们可以定义在某一标签里的嵌套标签使用的样式属性。

定义格式

父标签1 子标签1{
        
        声明1;
        声明2;
        声明3;
}
例
div span{
	font-size: larger;
	color: #DC143C;
			}

父当选择器与子选择器间以空格分隔代码中有以下格式时

<div>
<span>div中的第一个span元素</span>
<span>div中的第二个span元素</span>
</div>

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的多种样式属性使用。