CSS及其多种选择器

 

 

昨天博文快结束的时候我展示了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标签属性的属性值不能以数字开头;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的多种样式属性使用。

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值