上一篇博客提到了CSS选择器,现在较之比较详细的理解选择器
CSS实现了对元素的一对一,一对多的控制,要实现多种多样的控制那么选择器的种类也会是多种多样的,
先看一看牛腩重点说的三种基本的选择器
一、基本选择器
1.ID选择器
定义:可以为标有id的HTML元素指定特定的样式
从定义中为HTML元素指定特定的样式可以知道,ID选择器具有特定性,唯一性
之所以要有ID选择器,个人认为是在一些界面元素在有公共样式的情况下还需要保持自己的唯一性,
通过ID选择器可以对不同的web进行个性化的设计
在CSS中ID选择器用“#”来区分与其他选择器,格式如下
#Style{
width:560px;
}
以上就是一个ID选择器,前边有“#”作为ID选择器的标识
2.类选择器
定义:可以为标有类选择器的元素进行统一的样式设置
从定义中可以知道名称相同的类选择器可以多次出现,方便为标识有该类选择器元素进行样式的设置
类选择为我们为设置web统一的风格提供了很大的方便,如果多个页面都有相同的样式,那么类选择
器会是一个很不错的选择
在CSS选择器中用“.”来区分类选择器,格式如下
.Style{
width:360px;
}
以上就是一个类选择器,前边有“.”作为类选择器的标识
3.标签选择器
在HTML中会有很多的标签选择器,如果把ID选择器或类选择器放在一个大的环境下,那么标签选择器
就是在这个大环境下你的身份证号,根据你的身份证号总可以找到你,不管在哪里都是如此
在实际写代码的过程中,我们可以给局部一些用相同的格式的元素用相同的标签选择器,那么在以后
想要改变该种标签的样式的时候,通过标签选择器就可以很快的修改
<p></p> <h1></h1> <a></a>
上边是三种标签样式,在html中有很多很多的标签这里就不一一举例了
p{
background:#900;
}
在CSS中直接使用即可
二、比较(个人观点)
使用范围:类选择器>ID选择器>标签选择器
类选择器在使用的时候一般会涉及到多个web页面,用来设置通用的样式
ID选择器一般在单个页面设置一些个性化的样式
标签选择器适用在局部的一些元素样式的设置
灵活性:标签选择器>ID选择器
>类选择器
灵活性与它的使用范围是相反的,使用的范围越广灵活性越差,因为一旦更改会牵扯到多个
页面的变动
优先级:ID选择器>类选择器>标签选择器
在下文做介绍
三、具体使用
以上只是说三种基本的选择器,但是在具体使用的时候还会有嵌套的使用,优先级的不同
优先级:
当在CSS中出现了对同一元素用不同的选择器设置了不同的样式时会优先使用ID选择器,其次是类
选择器,最后才是标签选择器
用以上三个选择器都是对文字“提高班”设置,那么“提高班”最终的样式会是width:560px;
如果只用了类选择器和标签选择器,那么“提高班”最终的样式是:width:360px;
嵌套使用:
1. #Style .con{
background:#900;
}
这是对ID选择器Style内的类选择器con样式的设置
2. #Style .con,#Back p{
background:#900;
}
这是对ID选择器Style内的类选择器con和ID选择器Back内的p标签样式分别进行了相同的设置
选择器在具体使用的时候还会有很多意想不到的问题,需要我们具体问题具体,有了最基本的知识储
备,解决其他的问题都会变得简单
四、扩展
CSS中还有很多其他的选择器,其中群组选择器和后迭代选择器我们已经见过了
群组选择器就是上边嵌套使用的2;后迭代选择器就是嵌套使用的1,这也应征了刚刚说的有了基础的知识
储备,解决其他问题都会变得很简单的道理,可以说大部分的选择器都是在这三种最基本的选择器上衍生来
的吧