CSS中的选择器


选择器:浏览器通过选择器为满足条件的HTML元素添加CSS样式
常见的选择器有:id选择器,class选择器,标签选择器,分组选择器,父代选择器,通配符选择器,最后介绍一下伪类。

1 标签选择器

标签选择器:浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式,其语法如下:

标签选择器名 {
	declaration1;
	declaration2;
    …
}

以p标签为例设置标签选择器
在这里插入图片描述
在这里插入图片描述
特别注意:浏览器会为HTML文档内所有p标签元素添加“font-size: 36px;font-weight: bold;”CSS样式。

2 id选择器

id选择器:浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式,其语法如下(以p标签为例):

#id选择器名 {		//注意id前边的#号是规范
	declaration1;
	declaration2;
    	…
}

在这里插入图片描述
在这里插入图片描述
注意:
id标签属性的属性值不能以数字开头;
id标签属性的属性值在HTML文档中必须唯一;

3 类选择器

类选择器:浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式,其语法如下:

. 类选择器名 {		//注意类选择器名之前的点
	declaration1;
	declaration2;
    …
}

以p标签为例设置类选择器
在这里插入图片描述
在这里插入图片描述
注意:
1,class标签属性的属性值不能以数字开头;
2,class标签属性的属性值可以有多个,每个值之间用空格间隔;例子如下:
在这里插入图片描述
注意空格间隔
在这里插入图片描述
总结以上三个选择器的优先级
id选择器优先级最高,标签选择器优先级最低,如下所示:id选择器 > 类选择器 > 标签选择器,如下代码:
在这里插入图片描述
在这里插入图片描述
对三个span标签分析:第三个span标签有标签选择器,类选择器和id选择器设置样式值,由于id选择器优先级较高,所以样式显示为id选择器的;第二个span标签是标签选择器和类选择器设置样式,类选择器优先级较高,所以样式显示为类选择器的;第一个span标签只有标签选择器设置样式。

4 分组选择器

如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器以简
化CSS样式代码, 该选择器的选择器名由多个选择器组成,使用逗号分隔,其语法如下:

选择器1,选择器2,选择器3…{		//这里应该注意,在分组选择器列表中,选择器可以是id选择器,类选择器。以及标签选择器,不是确定的哪一种。
	declaration1;
	declaration2;
    …
}

在这里插入图片描述
在这里插入图片描述

5 后代选择器

后代选择器(descendant selector)又称为包含选择器,用于为特定的HTML子元素添加CSS样式,语法如下:

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {		//选择器之间用空格间隔;
	declaration1;
	declaration2;
    	…
}

在这里插入图片描述
只为ol标签元素内class="font_color"的子元素添加CSS样式
总结:html body 以及ol都是li的父类标签,所以也可以写作如下选择器

html body ol .font_color{
	color:red
}

6 通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素,其语法如下:

*{		//一般情况下:在设置padding和margin时用
	declaration1;
	declaration2;
    	…
}

在这里插入图片描述

补充:!important
!important用于提高指定样式规则的应用优先权,如下代码:
在这里插入图片描述
在这里插入图片描述
由于给span标签选择器设置了!important,所以span标签选择器优先级最高,给所有的span标签都设置一样的font-size:36px的属性

7 伪类

CSS 伪类用于向某些选择器添加特殊的效果,语法结构如下:
在这里插入图片描述
在这里插入图片描述
注意
若:link、:visited、:hover和:active一起使用,:hover 必须被置于 :link 和 :visited 之后,:active 必须被置于 :hover 之后,即:link -> :visited -> :hover -> :active ,简记love hate(爱恨) 。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值