CSS选择器

CSS选择器

​ 有人将HTML比作英语的名词,CSS比作英语的形容词,JS比作英语的动词。CSS全称叫做级联样式表,CSS的作用就是给HTML文档中的标签添加装饰。在嵌入样式和外部样式中要将CSS的修饰赋予指定的标签上就必须使用CSS选择器来寻找HTML文档中的指定标签然后再赋予样式,所以CSS选择器的作用就是用来定位HTML标签

1.上下文选择器

格式:

标签1 标签2 {声明}

在这里标签1必须是标签2的祖先(不一定是父标签),这一条语句选中的是标签2。

2.子类选择符>

格式:

标签1 > 标签2 {声明}

这里标签1必须是标签2的父标签,同样的上一条语句的选择的是标签2。

3.紧邻同胞选择符+

格式:

标签1 + 标签2 {声明}

标签1必须是标签2的兄弟标签而且标签2必须紧跟着标签1,上一条语句的选择的是标签2。

4.一般同胞选择符~

格式与示例:

标签1 ~ 标签2 {声明}

标签1必须是标签2的兄弟标签,而标签2相对于标签1没有严格的限制,上一条语句的选择的是标签2。

5.通用选择符

格式:

标签1(可以省略) * {声明}

上一条语句代表选中标签1中的所有标签,当标签1被省略时,代表着选中HTML文档中的所有标签。

6.ID选择器

格式:

#ID选择器的名字 {声明}

HTML文档中的每一个标签要么没有ID属性,如果有就必须保证与文档中其它标签的ID属性值不同,在ID选择器中CSS会选择HTML文档中ID值相同的标签。ID通常会作为一个标签的唯一标识,方便js去寻找标签,进行相关操作。

7.类选择器

格式:

.类选择器的名字 {声明}

类选择器可以批量的为不同的标签赋予相同的样式。在HTML文档中,不同的标签可以拥有相同的类值。

8.属性名选择符

格式:

标签名 [属性名]

选择任何带有属性名的标签。

9.属性值选择符

格式:

标签名 [属性名="属性值"]

选择任何带有值为属性值的属性名的标签名。

参考:《CSS设计指南(第3版)》

posted @ 2020-09-23 16:06  秃了就变强了  阅读(12)  评论(0编辑  收藏