CSS常用的选择器和优先级的权重问题

CSS注释

CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹；
每个属性名与属性值之间用:分隔，多对属性之间，必须用;来分隔

选择器{
属性1:属性值1;
属性2:属性值2;

【选择器的命名规范】

1、只能有字母、数字、下划线、减号组成。
2、开头不能是数字，也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。

1、标签选择器

写法：HTML标签名{}
作用：可以选中页面中，所有与选择器同名的HTML标签。

例如：

li{
　　color:red;
　　font-size: 48px;
}

2、类选择器（class选择器）

写法：.class名{}
调用：在需要调用选择器样式的标签上，使用class=“class名”调用选择器
优先级：class选择器>标签选择器

例如：

.first{
　　color: blue;
}

3、ID选择器

写法：#ID名{}
调用：需要调用样式的标签，起一个id=“ID名”
优先级：ID选择器>class选择器
注意：一个页面中，不能出现同名ID

例如：
#one{
　　background-color: yellow;
}

　　　　　　【class选择器和ID选择器的区别】
　　　　　　　1、写法不同：class选择器用.声明，ID选择器用#声明；
　　　　　　　2、优先级不同：ID选择器>class选择器；
　　　　　　　3、作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。

4、通用选择器
写法：*{}
作用：可以选中页面中所有的HTML标签。
优先级：最低！！
例如：
*{
　　color: orange;
}

5、并集选择器
写法：选择器1，选择器2,.....,选择器n{}
生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
例如：
li,.first{
　　color: red;
}

6、交集选择器
写法：选择器1选择器2......选择器n{} 所有选择器紧挨着，没有分隔
生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效
例如：
li.first{
　　color:red;
}

7、后代选择器
写法：选择器1选择器2......选择器n{} 选择器之间空格分隔
生效规则：只要满足，后一选择器是前一个选择器的后代，即可生效。（后代包括子代、
孙代、重孙代。。。）
例如：
div span{
　　color:orange
}

8、子代选择器
写法：选择器1>选择器2>......>选择器n{} 选择器之间用>分隔
生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（
中间不能间隔任何标签）
例如：
div>span{
　　color: orangered;
}