后浪小萌新HTML --- css选择器

一、选择器

选择器是用来选中指定标签来添加样式

常用的选择器:

1. id选择器: 在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。

   注意：同一个id值在当前页面中只有一个标签

   #p1{} - 选中id是p1的标签

2. 类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。
   .c1{} - 选中class是c1的所有的标签

注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）

4. 元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签
   p{} - 选中所有的p标签
   div{} - 选中所有的div标签

5. 通配符：将*作为选择器, 选中当前页面中的所有的标签

6. 群组选择器：将多个其他的选择器有逗号隔开作为一个选择器，选中每个独立的选择器选中所有的标签
   p,.c1,#p1{} - 选中所有的p标签和class是c1标签，以及id是p1的标签
   a,img{} - 选中所有的图片和超链接

7. 后代选择器：将多个选择器用空格隔开作为一个选择器
   div p{} - 获取所有是div后代的p标签
   div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)

8. 子代选择器：将多个选择器用>隔开作为一个选择器
   div>p{} - 选中所有div标签子标签中的p标签
   div>.p1{} - 选中所有div标签子标签中class是p1的标签

二、伪类选择器

1. 什么是伪类选择器
   普通选择器选中的是标签（选中一个标签的所有状态）
   伪类选择器选中的是标签的状态

   语法：

   选择标签的选择器:伪类选择器{}

   常用的伪类选择器：

   1. link - 链接未被成功访问对应的状态（只针对超链接有效）
   2. visited - 链接已经被成功访问对应的状态（只针对超链接有效）
   3. hover - 鼠标悬停在标签上对应的状态（针对所有可见标签有效）
   4. active - 鼠标按住标签不放对应的状态（针对所有可见标签有效）

三、选择器的优先级

权重值越大优先级越高. (无论权重是多少, 内联样式表的优先级都是最高的)

元素选择器、* 权重值是:1

类选择器 权重值是: 2

id选择器权重值是: 4

群组选择器: 看每个独立的选择器的权重值分别是多少

后代选择器和子代选择器: 所有被>或者空格隔开的选择器的权重之和

注：后代选择器比较权重的时候: 先比第一大的独立选择器谁大谁优先级高, 如果第一大相同,就比第二大的选择器, 以此类推