css选择器

css选择器（重点）

一、作用（重点）：找到特定的HTML页面元素；

即，css选择器就是选择标签用的，把我们想要的标签选出来。

二、css基础选择器

1、标签选择器

⑴概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。

⑵语法：标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3}

⑶作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签。

⑷优点：是能快速为页面中同类型的标签统一样式。

⑸缺点：不能设计差异化样式。

2、类选择器

⑴语法：类选择器使用“."（英文点号）进行标识，后面紧跟类名。

①类选择器：

.类名 {

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

②标签

⑵优点：可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签。

⑶注意：①类选择器使用“."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）；

②长名称或者词组可以使用中横线来为选择器命名；

　　　 ③不要纯数字、中文等命名，尽量使用英文字母来表示。

　　　 ④在一个标签内只能有一个“class”

⑷记忆口诀：差异化选择，一个或多个。上面点定义，类名别写错。谁用谁调用，class来做。工作类最多。

⑸类选择器特殊用法-多类名

①概念：可以给标签指定多个类名，从而达到更多的选择目的；

②如font-size：要想改变字号大小，只需改变<style></style>里面 font-size 的大小；

③要想增加类名，只需在原有<p class='类名’></p>中class类名后空一格再加上其他类名。

3、id选择器

⑴id选择器使用 # 进行标识，后面紧跟id名；

⑵基本语法格式：

①id选择器：

#id名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}

②标签：

⑶元素的id值是唯一的，只能对应文档中某一个具体的元素；

⑷用法基本和类选择器相同。

⑸id选择器和类选择器的区别

1）、wsc标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

①类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟、李娜；

②id选择器好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

2）id选择器和类选择器最大的不同在于使用次数上。

①类选择器我们在修改样式中，用的最多；

②id选择器一般用于页面唯一性的元素身上，经常和JavaScript搭配使用。

4、通配符选择器

⑴概念：通配符选择器用”*“号表示，* 就是选择所有的标签，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

⑵基本语法格式：* {属性1：属性值1；属性2：属性值2；属性3：属性值3；}

如：使用通配符选择器定义css样式，清除所有HTML标记的默认边框。

* {

margin: 0; /* 定义外边距 */

padding: 0; /* 定义内边距 */

}

⑶会匹配页面中所有的元素，降低页面响应速度，不建议随便使用。

5、基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color：red；}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color：red；}
id选择器	一次只能选择一个标签	只能使用一次	不推荐使用	#nav{color：red；}
通配符选择器	选择所有标签	选择的太多，有部分不需要	不推荐使用	* {color：red；}