多语言展示
当前在线:1237今日阅读:84今日分享:32

CSS的3大选择器

CSS具有3大选择器:id选择器优先级,类选择器优先级,标签选择器优先级,有关它们的优先级及相关实验,请看我的另一篇文章《CSS选择器优先级》。
标签选择器
1

顾名思义,标签选择器就是直接把标签的名字当做选择器。

2

常用的标签选择符如下:

3

使用的时候,直接写标签名称就行,比如body。当设置了某个标签的样式时,这个设置会对本页面所有的相同标签起作用。

ID选择器
1

ID代表了唯一,就像身份证号一样,每一个人的都不相同。页面元素的ID也不能相同,一个ID在html中只能出现一次。

2

设置标签的id,相当于把id和值当做一对属性值,比如

段落1

,这就设置了段落标签p的id为p1。

3

Id选择符,直接使用 #id,把id替换为对应标签的id值,就可以精确的选择某个标签。比如选择刚才的p标签:#p1 。

4

注意:(1)    一个Html网页中id只能出现一次;(2)    id是区分大小写的,#p1和#P1代表的是不同的id选择器,选择的元素不同;(3)    id选择器是最精准的选择器,可以定位到某个具体的唯一元素。

Class类选择器
1

Class类选择器,代表了某一类相同的样式,“物以类聚,人以群分“,比如可以把红色字体定义为一类,所有需要设置红色字体的标签都加上这个类。

2

给标签添加类,实际也是把类和类值当做一对属性值添加到标签中,比如

段落1

,这就设置了这个段落的class为red。

3

class类选择器,直接使用 .class,把class替换为对应的类值。这样就可以为具有相同类的标签应用相同的样式了。比如: .red { color : red; }  这设置了类red的标签字体颜色为红色。

4

注意:(1)    多个标签可以使用相同的类,相当于给它们设置了相同的样式,比如:

标题1

段落1

这样可以把h1和p都设置为红色字体。 (2)    一个标签可以设置多个类,相同于讲一个标签设置了多种样式,比如:

  段落1,红色,加粗

定义粗体为一类样式  .bold { font-weight : bold; } font-weight意思是字体重要性,bold就是加粗的意思。这样段落p会同时具有类red和类bold的样式。注意:多个类名中间使用空格间隔。

推荐信息